HTML IMG etiketi kullanılarak en boy oranı nasıl korunur?


132

Uygulamamızda bir fotoğrafı göstermek için bir HTML img etiketi kullanıyorum. Hem yükseklik hem de genişlik özniteliğini 64 olarak ayarladım. Herhangi bir görüntü çözünürlüğünü (ör. 256x256, 1024x768, 500x400, 205x246, vb.) 64x64 olarak göstermem gerekiyor. Ancak bir img etiketinin yükseklik ve genişlik niteliklerini 64 olarak ayarladığınızda, en boy oranını korumaz, dolayısıyla görüntü bozuk görünür.

Referansınız için tam kodum:

<img src="Runtime Path to photo" border="1" height="64" width="64">


Chridam, Bu soruyu sorduğumda uzun zaman oldu. Bu konu için çalıştığım şirketten ayrıldım. Önerilen çözümleri deneyemedim çünkü o zamandaki son teslim tarihlerini karşılamak için diğer öncelikler üzerinde çalışıyordum. Bu konuda daha fazla ilerleme şansım olmadı.
sunil kumar

Yanıtlar:


134

Yükseklik VE genişliği ayarlamayın. Birini veya diğerini kullanın ve doğru en boy oranı korunacaktır.

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}
<img src="http://placehold.it/200x250" />

<img src="http://placehold.it/200x250" width="64" />

<img src="http://placehold.it/200x250" height="64" />

<img src="http://placehold.it/200x250" class="widthSet" />

<img src="http://placehold.it/200x250" class="heightSet" />


14
... peki ya hem yüksekliği hem de genişliği sabitlemek istiyorsanız?
fatuhoku

7
Bu dinamik uygulamalar için mantıklı değil. Görüntünün oranına bağlı olduğundan, genişliğin mi yoksa yüksekliğin mi 64 piksel olacağı bilinmemektedir. Neden bu olumlu oylu yanıt?
Koenigsberg

@ Mär Bu soru sabit genişlik ve / veya yükseklikte resimler hakkındaydı. Yanıt verme, sorunun bir gerekliliği değildi.
Turnip

3
Boyut sabittir, en boy oranı sabit değildir, çünkü soru özellikle herhangi bir çözünürlükteki herhangi bir görüntü ile ilgilidir . 64x64'ten daha küçük çözünürlükler dahil.
Koenigsberg

66

işte örnek olan

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }
<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>


8
Bu çözümü kullanmak isteyen kişilere sadece bir not: nesne uyumu tarayıcılar tarafından çok iyi desteklenmemektedir. IE veya Edge tarafından hiç desteklenmiyor. Kaynak: caniuse.com/#feat=object-fit
Sean Dawson

2
Artık Edge 16+ üzerinde destekleniyor, tabloya bakın: w3schools.com/css/css3_object-fit.asp
Eddy R.

45

Set widthve heightgörüntülerin etmek auto, ancak sınır hem max-widthve max-height:

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

Vaktini boşa harcamak

64x64 piksellik "çerçevelerde" rasgele boyuttaki resimleri görüntülemek istiyorsanız , bu keman gibi satır içi blok sarmalayıcıları ve konumlandırmayı kullanabilirsiniz .


3
Orijinal boyutun ötesinde ölçeklenmeyecek, yalnızca orijinal boyutun altına ölçeklenecektir.
Koenigsberg

40
<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">

2
Görüntünün yönünden bağımsız olmaya devam ettiği için bu doğru çözümdür. 3rror404'ün çözümü, görüntünün uzun olduğundan daha geniş mi yoksa tam tersi mi olduğunu bilmenizi gerektirir.
devios1

2
Ayrıca set widthve heightiçin auto.
Mahmoodvcs

Hem yüksekliği hem de genişliği kısıtlamak için doğru çözüm.
Pavan Kumar

1
Bir görüntü bununla uygun şekilde kısıtlanacak , ancak orijinal boyutunun ötesinde ölçeklenmeyecektir. OP'nin iki kişiden hangisini istediği açılış görevinden belli değil.
Koenigsberg

14

Listelenen yöntemlerden hiçbiri, istenen en boy oranını korurken görüntüyü bir kutuya sığan olası en büyük boyuta ölçeklendirmez.

Bu, IMG etiketiyle yapılamaz (en azından biraz JavaScript olmadan), ancak şu şekilde yapılabilir:

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>

2
Evet. Etiket style="background: url('_'); background-size: cover width:_px height:_px"için kullanın <img>.
Ujjwal Singh

3
Teşekkürler @UjjwalSingh. Aslında, görüntü boyutunu mümkün olan en büyük boyuta çıkarmak için ihtiyacımız coveryok contain. contain"sinemaskop" ile sonuçlanır.
Ortwin Gentz


3

Görüntüyü div64x64 boyutlarında bir boyuta sarın ve görüntüye ayarlayın width: inherit:

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>

1

Görüntülemek istediğiniz görüntünün yüksekliğini ve genişliğini korumak için neden ayrı bir CSS dosyası kullanmıyorsunuz? Bu sayede mutlaka genişlik ve yüksekliği sağlayabilirsiniz.

Örneğin:

       image {
       width: 64px;
       height: 64px;
       }

1

Bunu dene:

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

Object-fit = "cover" eklemek, görüntüyü en boy oranını kaybetmeden alanı kaplamaya zorlar.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.