Jeg jobber med bilder, og jeg kom over et problem med størrelsesforhold.
<img src="big_image.jpg" width="900" height="600" alt="" />
Som du kan se, er høyde
og bredde
allerede spesifisert. Jeg la til CSS-regel for bilder:
img {
max-width:500px;
}
Men for big_image.jpg
får jeg width=500
og height=600
. Hvordan kan jeg angi at bilder skal endres i størrelse, samtidig som jeg beholder størrelsesforholdet.
Egenskapen background-size er kun ie>=9, men hvis det er greit for deg, kan du bruke en div med background-image
og angi background-size: contain
:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Nå kan du bare sette div-størrelsen din til hva du vil, og ikke bare vil bildet beholde størrelsesforholdet, det vil også bli sentralisert både vertikalt og horisontalt i div. Bare ikke glem å angi størrelsene på css siden divs ikke har bredde / høyde-attributtet på selve taggen.
Denne tilnærmingen er forskjellig fra setecs svar, ved å bruke dette vil bildeområdet være konstant og definert av deg (etterlater tomme mellomrom enten horisontalt eller vertikalt, avhengig av div-størrelse og bildeformat), mens setecs svar vil gi deg en boks som nøyaktig størrelsen på det skalerte bildet (uten tomme mellomrom).
Rediger: I henhold til MDN background-size documentation kan du simulere bakgrunnsstørrelsesegenskapen i IE8 ved hjelp av en proprietær filterdeklarasjon:
Selv om Internet Explorer 8 ikke støtter background-size-egenskapen, er det mulig å emulere noe av funksjonaliteten ved hjelp av den ikke-standardiserte -ms-filterfunksjonen:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Fjern egenskapen "høyde".
<img src="big_image.jpg" width="900" alt=""/>
Ved å angi begge endrer du størrelsesforholdet til bildet. Bare å angi en vil endre størrelsen, men bevare størrelsesforholdet.
Eventuelt for å begrense overstørrelser:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Det finnes ingen standard måte å bevare størrelsesforholdet for bilder med bredde
, høyde
og maksimumsbredde
angitt sammen.
Så vi er tvunget til enten å spesifisere bredde
og høyde
for å forhindre at siden "hopper" under lasting av bilder, eller å bruke max-bredde
og ikke spesifisere dimensjoner for bilder.
Å spesifisere bare width
(uten height
) gir vanligvis ikke mye mening, men du kan prøve å overstyre HTML-attributtet height
ved å legge til en regel som IMG {height: auto; }
i stilarket.
Se også den relaterte Firefox-feilen bug 392261.