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į.
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')";
Pašalinkite savybę "height".
<img src="big_image.jpg" width="900" alt=""/>
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ą:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
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.