CSS görüntüyü yeniden boyutlandırmaya ve en boy oranını korumaya zorlar

Question

Daha

Kaynak Non AMP-version Düzenle

CSS görüntüyü yeniden boyutlandırmaya ve en boy oranını korumaya zorlar

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.

Cody Guldner

Edited question 2013ösp23ös17 Haziran 2013 в 5:23

Programlama

image css aspect-ratio

2012ösp20ös18 Ekim 2012 в 6:20

44 görünümler

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

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

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

el Dude

Kaynak Non AMP-version Düzenle

Yükseklik" özelliğini kaldırın.

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:

el Dude

Edited answer 2013ösp35ös14 Temmuz 2013 в 2:35

17

0

Yorumlar (4)

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

Genişlik,yükseklikvemaks 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.