CSS tvinger billedet til at ændre størrelse og bevarer formatforholdet

Question

Mere

Kilde Ikke AMP-version Rediger

CSS tvinger billedet til at ændre størrelse og bevarer formatforholdet

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.

Cody Guldner

Redigeret spørgsmål 2013ør juni 2013 в 5:23

Programmering

image css aspect-ratio

2012ør oktober 2012 в 6:20

24 visninger

Hoffmann · Answer 1 · 2013-05-30T13:47:50+00:00

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')";

el Dude · Answer 2 · 2012-10-20T18:30:53+00:00

el Dude

Kilde Ikke AMP-version Rediger

Fjern egenskaben "height".

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:

el Dude

Redigeret svar 2013ør juli 2013 в 2:35

17

0

Kommentarer (4)

Marat Tanalin · Answer 3 · 2012-10-20T18:37:36+00:00

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).