CSS priverstinis vaizdo dydžio keitimas ir kraštinių santykio išlaikymas

Question

Daugiau

Šaltinis Ne AMP versija Redaguoti

CSS priverstinis vaizdo dydžio keitimas ir kraštinių santykio išlaikymas

Dirbu su vaizdais ir susidūriau su kraštinių santykio problema.

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

Kaip matote, height ir width jau yra nurodyti. Pridėjau CSS taisyklę, skirtą paveikslėliams:

img {
  max-width:500px;
}

Tačiau big_image.jpg atveju gaunu width=500 ir height=600. Kaip galiu nustatyti, kad paveikslėlių dydis būtų keičiamas, išlaikant jų kraštinių santykį.

Cody Guldner

Redaguotas klausimas popietr birželis 2013 в 5:23

Programavimas

image css aspect-ratio

popietr spalis 2012 в 6:20

16 peržiūros

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

Fono dydžio savybė yra tik 9, bet jei jums tai tinka, galite naudoti div su background-image ir nustatyti background-size: contain:

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

Dabar galite tiesiog nustatyti tokį div dydį, kokio norite, ir vaizdas ne tik išlaikys savo kraštinių santykį, bet ir bus centruotas tiek vertikaliai, tiek horizontaliai div'e. Tik nepamirškite nustatyti dydžių css, nes div neturi width/height atributo pačioje žymėje.

Šis metodas skiriasi nuo setecs atsakymo, naudojant šį metodą vaizdo plotas bus pastovus ir apibrėžtas jūsų (paliekant tuščias vietas horizontaliai arba vertikaliai, priklausomai nuo div dydžio ir vaizdo kraštinių santykio), o setecs atsakyme gausite langelį, kuris bus tiksliai tokio dydžio, kokio dydžio yra sumažintas vaizdas (be tuščių vietų).

Redaguoti: Pagal MDN background-size dokumentaciją galite imituoti fono dydžio savybę IE8, naudodami firminę filtro deklaraciją:

Nors Internet Explorer 8 nepalaiko savybės background-size, kai kurias jos funkcijas galima imituoti naudojant nestandartinę funkciją -ms-filter:

-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

Šaltinis Ne AMP versija Redaguoti

Pašalinkite savybę "height".

Nurodydami abi savybes, keičiate vaizdo kraštinių santykį. Nustačius tik vieną, dydis bus pakeistas, bet kraštinių santykis išliks.

Pasirinktinai, norint apriboti didinimą:

el Dude

Redaguotas atsakymas popietr liepa 2013 в 2:35

17

0

Komentarai (4)

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

Nėra standartinio būdo, kaip išsaugoti kraštinių santykį paveikslėliuose, kurių platumas, aukštis ir max-width nurodyti kartu.

Taigi esame priversti arba nurodyti platumą ir aukštį, kad kraunant paveikslėlius puslapis "nešokinėtų", arba naudoti max-width ir nenurodyti paveikslėlių matmenų.

Nurodyti tik platumą (be aukščio) paprastai nėra prasmės, tačiau galite pabandyti pakeisti aukščio HTML atributą, į savo stilių lentelę įtraukdami tokią taisyklę kaip IMG {height: auto; }.

Taip pat žr. susijusią "Firefox" klaida 392261.