Es strādāju ar attēliem un saskāros ar problēmu, kas saistīta ar malu attiecībām.
<img src="big_image.jpg" width="900" height="600" alt="" />
Kā redzat, height
un width
jau ir norādīti. Es pievienoju CSS noteikumu attēliem:
img {
max-width:500px;
}
Bet big_image.jpg
es saņemu platums=500
un augstums=600
. Kā es varu iestatīt attēlu izmēru maiņu, saglabājot to malu attiecību?
Fona izmēra īpašība ir tikai 9, bet, ja jums tas ir ērti, varat izmantot div ar background-image
un iestatīt background-size: contain
:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Tagad jūs varat vienkārši iestatīt div izmērus, kādus vien vēlaties, un attēls ne tikai saglabās savu proporciju, bet arī būs centrēts gan vertikāli, gan horizontāli divā. Tikai neaizmirstiet iestatīt izmērus css, jo divs nav width/height atribūtu pašā tagā.
Šī pieeja atšķiras no setecs atbildes, jo, izmantojot šo, attēla laukums būs nemainīgs un to definēsiet jūs (atstājot tukšas vietas horizontāli vai vertikāli atkarībā no div izmēra un attēla proporciju), bet setecs atbilde jums radīs lodziņu, kas precīzi atbilst mērogotā attēla izmēram (bez tukšām vietām).
Rediģēt: Saskaņā ar MDN background-size dokumentāciju fona izmēra īpašību IE8 var imitēt, izmantojot patentētu filtra deklarāciju:
Lai gan Internet Explorer 8 neatbalsta fona izmēra īpašību, ir iespējams atdarināt daļu tās funkcionalitātes, izmantojot nestandarta -ms-filter funkciju:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Noņemiet "augstums" īpašību.
<img src="big_image.jpg" width="900" alt=""/>
Norādot abas šīs īpašības, jūs maināt attēla malu attiecību. Nosakot tikai vienu, mainīsies izmērs, bet saglabāsies malu attiecība.
Pēc izvēles, lai ierobežotu lieluma pārsniegšanu:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Nav standarta veida, kā saglabāt malu attiecību attēliem, kuriem platums
, augstums
un maksimālais platums
ir norādīti kopā.
Tāpēc mēs esam spiesti vai nu norādīt platumu
un augstumu
, lai novērstu lapas "lēcienus" attēlu ielādes laikā, vai arī izmantot max-width
un nenorādīt attēlu izmērus.
Norādot tikai platumu
(bez augstuma
), parasti nav lielas jēgas, bet jūs varat mēģināt aizstāt augstuma
HTML atribūtu, pievienojot stilu lapā šādu noteikumu IMG {height: auto; }
.
Skatiet arī saistīto Firefox kļūda 392261.