Görüntülerle ç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 olarak heightve widthzaten belirtilmiştir. Resimler için CSS kuralı ekledim:

img {
  max-width:500px;
}

Ama big_image.jpgalıyorum width=500ve height=600. En boy oranlarını korurken görüntüleri yeniden boyutlandırılacak şekilde nasıl ayarlayabilirim.

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Bu, belirtilen alan için çok büyükse görüntünün küçülmesini sağlar (olumsuz olarak görüntüyü büyütmez).

Bu sorunla oldukça zorlandım ve sonunda bu basit çözüme ulaştım:

object-fit: cover;
width: 100%;
height: 250px;

Genişliği ve yüksekliği ihtiyaçlarınıza uyacak şekilde ayarlayabilirsiniz; nesne sığdırma özelliği kırpma işlemini sizin için yapar.

Şerefe.

Aşağıdaki çözümler , ana kutu genişliğine bağlı olarak görüntünün ölçeklendirilmesine ve ölçeklendirilmesine izin verecektir .

Tüm görüntülerin yalnızca gösterim amacıyla sabit genişliği olan bir üst kabı vardır . Üretimde, bu ana kutunun genişliği olacaktır.

En İyi Uygulama (2018):

Bu çözüm, tarayıcıya resmi maksimum kullanılabilir genişlikte oluşturmasını ve yüksekliği bu genişliğin yüzdesi olarak ayarlamasını söyler.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Meraklısı Çözüm:

Daha zarif bir çözümle, görüntüyü boyutundan bağımsız olarak kırpabilir ve kırpmayı telafi etmek için bir arka plan rengi ekleyebilirsiniz.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Dolgu belirten çizgi için, görüntünün en boy oranını hesaplamanız gerekir, örneğin:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Böylece, üst dolgu =% 34.37.

Arka plan boyutu özelliği yalnızca> = 9'dur, ancak bu sizin için uygunsa, bir div kullanabilir background-imageve ayarlayabilirsiniz background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Şimdi div boyutunuzu istediğiniz gibi ayarlayabilirsiniz ve sadece görüntü en boy oranını korumakla kalmaz, aynı zamanda div içinde hem dikey hem de yatay olarak merkezileştirilir. Divs etiketin kendisinde width / height özelliğine sahip olmadığından css'deki boyutları ayarlamayı unutmayın.

Bu yaklaşım setecs cevabından 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 boş boşlukları yatay veya dikey olarak bırakarak), setecs cevabı size tam olarak ölçeklenmiş görüntünün boyutu (boş boşluk olmadan).

Düzenleme: MDN arka plan boyutu belgelerine göre IE8'de özel bir filtre bildirimi kullanarak arka plan boyutu özelliğini simüle edebilirsiniz:

Internet Explorer 8 arka plan boyutu ö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')";

Buradaki bazı cevaplara çok benzer, ancak benim durumumda bazen daha uzun, bazen daha büyük görüntüler vardı.

Bu stil, tüm görüntülerin mevcut tüm alanı kullandığından, oranı koruduğundan ve kesmediğinden emin olmak için bir cazibe gibi çalıştı:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

"Height" ö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ıracak, ancak en boy oranını koruyacaktır.

İsteğe bağlı olarak, büyük boyutları kısıtlamak için:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Sadece css'nize ekleyin, Orijinal oranı koruyarak otomatik olarak küçülür ve genişler.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Orada olan görüntüler için boy oranını korumak için standart bir yolu olduğunu width, heightve max-widthbirlikte belirtilmiş.

Bu yüzden görüntüleri yüklerken sayfanın "sıçramasını" belirtmeye widthve heightönlemeye ya da max-widthgörüntüler için boyutlar kullanmaya ve belirtmemeye zorlanıyoruz .

Yalnızca width(olmadan height) belirtmek genellikle anlamlı değildir, ancak stil sayfanıza heightbenzer bir kural ekleyerek HTML özelliğini geçersiz kılmayı deneyebilirsiniz IMG {height: auto; }.

Ayrıca bkz. İlgili Firefox hatası 392261 .

İşte bir çözüm:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

Bu, görüntünün her zaman tüm ebeveyni kapsadığından (aşağı ve yukarı doğru) ve aynı en boy oranını koruduğundan emin olur.

Resim kapsayıcı etiketinizin CSS sınıfını şu şekilde ayarlayın image-class:

<div class="image-full"></div>

ve bunu CSS stil sayfanıza ekleyin.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Görüntüyü belirli bir en boy oranına sahip olmaya zorlarken, duyarlı bir görüntüyü korumak için aşağıdakileri yapabilirsiniz:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

Ve SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Bu, yazarların yüklediği görüntünün boyutuna bakılmaksızın belirli bir en boy oranını uygulamak için kullanılabilir.

Http://codepen.io/Kseso/pen/bfdhg adresindeki @Kseso'ya teşekkürler . Daha fazla oran ve çalışan bir örnek için bu URL'yi kontrol edin.

Görüntüyü tam boyuta sığdırmak için çok fazla kod yazmanıza gerek yoktur. Çok basit

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

Sabit genişlik yüzdesine sahip , ancak sabit genişlik pikseline sahip olmayan bir görüntü koymak istiyorsanız cevap aşağıdadır .

Ve bu, farklı ekran boyutlarıyla uğraşırken faydalı olacaktır .

Püf noktaları

1. Kullanma padding-topgenişliği yüksekliği ayarlamak için kullanılır.
2. position: absoluteDolgu alanına görüntü koymak için kullanılır .
3. Kullanılması max-height and max-widthemin olmak için görüntü olmaz ebeveyn elemanı üzerinde.
4. kullanarak display:block and margin: autogörüntüyü ortalamak için.

Ben de keman içindeki hilelerin çoğunu yorumladım.

Bunun gerçekleşmesi için başka yollar da buluyorum. Html gerçek bir görüntü olmayacaktır, bu yüzden ben html "img" eleman gerektiğinde ben şahsen üst cevap perfer.

arka planı kullanarak basit css http://jsfiddle.net/4660s79h/2/

arka plan resmi üst kelime ile http://jsfiddle.net/4660s79h/1/

mutlak konum kullanma kavramı buradan http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Bunu kullanabilirsiniz:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Bunun gibi bir div oluşturabilirsiniz:

<div class="image" style="background-image:url('/to/your/image')"></div>

Ve stil vermek için bu css kullanın:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Duyarlı bir yaklaşım için en iyi uygulamanın Viewport birimlerini ve min / max özelliklerini aşağıdaki gibi kullanmasını öneriyorum :

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Bu, belirtilen alan için çok büyükse görüntünün küçülmesini sağlar (olumsuz olarak görüntüyü büyütmez).

Setec çözümü, otomatik modda "Sığacak Şekilde Küçült" için uygundur. Ancak, 'otomatik' moda sığacak şekilde en iyi şekilde genişletmek için, önce alınan görüntüyü geçici tanıtıcıya koymanız gerekir. ekran bloğunuz),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

Bu yaklaşım, alınan görüntüler ekran kutusundan daha küçük olduğunda kullanışlıdır. Boyut ve bant genişliğinden tasarruf etmek için Büyük ekran Kutunuzu doldurmak üzere bunları genişletilmiş sürümleri yerine sunucunuzda Orijinal Küçük boyutta kaydetmeniz gerekir.

Dikey hizalama için sözde bir öğe kullanmaya ne dersiniz? Bu daha az kod bir atlıkarınca için ama her sabit boyutlu konteyner üzerinde çalışıyor sanırım. En boy oranını koruyacak ve en kısa boyut için üst / alt veya sol / yazma üzerine @ gri-koyu çubuklar ekleyecektir. Bu arada, görüntü yatay olarak metin hizalaması ile ve dikey olarak sözde eleman tarafından ortalanır.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Tam ekran sunum:

img[data-attribute] {height: 100vh;}

Görünüm bağlantı noktası yüksekliği görüntüden büyükse görüntünün farka göre doğal olarak bozulacağını unutmayın.

Sonunda bunun en iyi çözümün kolay ve basit olduğunu düşünüyorum :

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}