CSS tvingar bilden att ändra storlek och behålla bildförhållandet

Egenskapen background-size är endast ie>=9, men om det är okej för dig kan du använda en div med background-image och ställa in background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Nu kan du bara ställa in din div-storlek till vad du vill och bilden kommer inte bara att behålla sitt bildförhållande, utan den kommer också att centraliseras både vertikalt och horisontellt inom div:en. Glöm bara inte att ställa in storlekarna i css eftersom divs inte har attributet width/height i själva taggen.

Detta tillvägagångssätt skiljer sig från setecs svar, eftersom bildområdet kommer att vara konstant och definieras av dig (med tomma utrymmen antingen horisontellt eller vertikalt beroende på div-storlek och bildformat), medan setecs svar ger dig en ruta som är exakt lika stor som den skalade bilden (utan tomma utrymmen).

Redigera: Enligt MDN background-size documentation kan du simulera egenskapen background-size i IE8 med hjälp av en egen filterdeklaration:

Även om Internet Explorer 8 inte har stöd för egenskapen background-size är det möjligt att efterlikna en del av dess funktionalitet med hjälp av den icke-standardiserade funktionen -ms-filter:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Ta bort egenskapen "height".

<img src="big_image.jpg" width="900" alt=""/>

Genom att ange båda egenskaperna ändrar du bildens bildförhållande. Om du bara anger en av dem ändrar du storlek men behåller bildförhållandet.

Eventuellt för att begränsa överdimensionering:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Det finns inget standardiserat sätt att bevara bildförhållandet för bilder där width, height och max-width anges tillsammans.

Vi är därför tvungna att antingen ange width och height för att förhindra att sidan hoppar när bilder laddas, eller att använda max-width och inte ange dimensioner för bilder.

Att bara ange width (utan height) är vanligtvis inte särskilt meningsfullt, men du kan försöka åsidosätta HTML-attributet height genom att lägga till en regel som IMG {height: auto; } i ditt formatmall.

Se även den relaterade Firefox [fel 392261] (https://bugzilla.mozilla.org/show_bug.cgi?id=392261).