Resimlerle çalışıyorum ve en boy oranlarıyla ilgili bir sorunla karşılaştım.
<img src="big_image.jpg" width="900" height="600" alt="" />
Gördüğünüz gibi, height
ve width
zaten belirtilmiştir. Resimler için CSS kuralı ekledim:
img {
max-width:500px;
}
Ancak big_image.jpg
için width=500
ve height=600
değerlerini alıyorum. Görüntüleri, en boy oranlarını koruyarak yeniden boyutlandırılacak şekilde nasıl ayarlayabilirim.
background-size özelliği sadece ie>=9'dur, ancak bu sizin için uygunsa, background-image
ile bir div kullanabilir ve background-size: contain
ayarını yapabilirsiniz:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Artık div boyutunuzu istediğiniz gibi ayarlayabilirsiniz ve görüntü yalnızca en boy oranını korumakla kalmaz, aynı zamanda div içinde hem dikey hem de yatay olarak ortalanır. Div'ler etiketin kendisinde genişlik/yükseklik özelliğine sahip olmadığından, boyutları css üzerinde ayarlamayı unutmayın.
Bu yaklaşım setecs answer'dan farklıdır, bunu kullanarak görüntü alanı sabit olacak ve sizin tarafınızdan tanımlanacaktır (div boyutuna ve görüntü en boy oranına bağlı olarak yatay veya dikey olarak boş alanlar bırakarak), setecs answer ise size tam olarak ölçeklendirilmiş görüntünün boyutunda (boş alanlar olmadan) bir kutu verecektir.
Düzenle: MDN background-size belgesine]1 göre, IE8'deki background-size özelliğini özel bir filtre bildirimi kullanarak simüle edebilirsiniz:
Internet Explorer 8 background-size özelliğini desteklemese de, standart olmayan -ms-filter işlevini kullanarak bazı işlevlerini taklit etmek mümkündür:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Yükseklik" özelliğini kaldırın.
<img src="big_image.jpg" width="900" alt=""/>
Her ikisini de belirterek görüntünün en boy oranını değiştirmiş olursunuz. Sadece birini ayarlamak yeniden boyutlandırır ancak en boy oranını korur.
İsteğe bağlı olarak, büyüklükleri kısıtlamak için:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Genişlik,
yükseklikve
maks genişlik` değerlerinin birlikte belirtildiği görüntüler için en boy oranını korumanın standart bir yolu yoktur.
Bu nedenle, resimlerin yüklenmesi sırasında sayfa "atlamalarını" önlemek için ya width
ve height
belirtmek ya da max-width
kullanmak ve resimler için boyut belirtmemek zorundayız.
Sadece genişlik
(yükseklik
olmadan) belirtmek genellikle pek anlamlı değildir, ancak stil sayfanıza IMG {height: auto; }
gibi bir kural ekleyerek yükseklik
HTML özelliğini geçersiz kılmayı deneyebilirsiniz.
Ayrıca ilgili Firefox hata 392261'a da bakın.