Jeg arbejder med billeder, og jeg er stødt på et problem med billedformatet.
<img src="big_image.jpg" width="900" height="600" alt="" />
Som du kan se, er height
og width
allerede angivet. Jeg har tilføjet CSS-regel for billeder:
img {
max-width:500px;
}
Men for big_image.jpg
får jeg width=500
og height=600
. Hvordan kan jeg indstille billeder til at blive omformet, mens de beholder deres formatforhold.
Egenskaben background-size er kun ie>=9, men hvis det er i orden med dig, kan du bruge en div med background-image
og indstille background-size: contain
:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Nu kan du bare sætte din div-størrelse til hvad du vil, og ikke alene vil billedet beholde sit formatforhold, det vil også blive centraliseret både vertikalt og horisontalt i div'en. Bare glem ikke at indstille størrelserne i css'en, da divs ikke har attributten width/height på selve tagget.
Denne fremgangsmåde er anderledes end setecs svar, ved at bruge denne fremgangsmåde vil billedområdet være konstant og defineret af dig (efterlader tomme rum enten horisontalt eller vertikalt afhængigt af div-størrelsen og billedets formatforhold), mens setecs svar vil give dig en boks, der nøjagtigt har samme størrelse som det skalerede billede (uden tomme rum).
Rediger: Ifølge MDN background-size documentation kan du simulere background-size-egenskaben i IE8 ved hjælp af en proprietær filterdeklaration:
Selv om Internet Explorer 8 ikke understøtter egenskaben background-size, er det muligt at efterligne nogle af dens funktioner ved hjælp af den ikke-standardiserede -ms-filter-funktion:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Fjern egenskaben "height".
<img src="big_image.jpg" width="900" alt=""/>
Ved at angive begge ændrer du billedets formatforhold. Hvis du kun angiver den ene, ændres størrelsen, men billedformatet bevares.
Eventuelt for at begrænse overdimensioneringer:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Der er ingen standardmetode til at bevare billedformatet for billeder med width
, height
og max-width
angivet sammen.
Så vi er tvunget til enten at angive width
og height
for at undgå at siden "hopper" under indlæsning af billeder, eller at bruge max-width
og ikke angive dimensioner for billeder.
Det giver typisk ikke meget mening at angive kun width
(uden height
), men du kan forsøge at tilsidesætte HTML-attributten height
ved at tilføje en regel som IMG {height: auto; }
i dit stylesheet.
Se også den relaterede Firefox [fejl 392261] (https://bugzilla.mozilla.org/show_bug.cgi?id=392261).