CSS ile farklı yükseklik ve genişlikteki tüm resimleri nasıl aynı yapabilirim?

Ürün fotoğraflarından oluşan bir resim duvarı oluşturmaya çalışıyorum. Ne yazık ki hepsi farklı yükseklik ve genişliğe sahip. Tüm resimlerin aynı boyutta görünmesi için css'i nasıl kullanabilirim? tercihen 100 x 100.

Yüksekliği ve genişliği 100px olan bir div yapmayı ve sonra onu nasıl doldurmayı düşünüyordum. Bunu nasıl yapacağından emin değil.

Bunu nasıl başarabilirim?

Güncellenen cevap (IE11 desteği yok)

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

Orijinal cevap

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}

<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

Eğer resimlerinizi çok fazla deforme ederseniz, yani onları bir orandan çıkarırsanız, doğru görünmeyebilirler, - küçük bir miktar iyidir, ancak bunu yapmanın bir yolu, resimleri bir 'kabın' içine koymaktır. ve kabı 100 x 100 olarak ayarlayın, ardından görüntünüzü hiçbiri taşmayacak şekilde ayarlayın ve en küçük genişliği kabın maksimum genişliğine ayarlayın, ancak bu görüntünüzün bir kısmını kırpacaktır.

Örneğin

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="ipod.jpg" alt="iPod" />
    </li>
</ul>



.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

Bu şekilde görüntü, kapsayıcı boyutunda kalacak, ancak kısıtlamaları bozmadan yeniden boyutlandırılacaktır.

En basit yol - Bu, görüntü boyutunu olduğu gibi koruyacak ve diğer alanı boşlukla dolduracaktır, bu şekilde tüm görüntüler, görüntü boyutuna bakılmaksızın gerilmeden aynı belirtilen alanı kaplayacaktır.

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}

Öğeleri object-fitboyutlandırmak için özelliği kullanabilirsiniz img:

• coverkabı doldurmak için görüntüyü orantılı olarak uzatır veya küçültür. Görüntü gerekirse yatay veya dikey olarak kırpılır.
• contain kabın içine sığması için görüntüyü orantılı olarak uzatır veya küçültür.
• scale-down kabın içine sığması için görüntüyü orantılı olarak küçültür.

.example {
  margin: 1em 0;
  text-align: center;
}

.example img {
  width: 30vw;
  height: 30vw;
}

.example-cover img {
  object-fit: cover;
}

.example-contain img {
  object-fit: contain;
}

<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

Yukarıdaki örnekte: kırmızı yatay, yeşil dikey ve mavi kare görüntüdür. Damalı desen 16x16 piksel karelerden oluşur.

Bootstrap kullanan ve tepkisini kaybetmek istemeyenler için konteynerin genişliğini ayarlamayın. Aşağıdaki kod gillytech gönderisine dayanmaktadır .

index.hmtl

<div id="image_preview" class="row">  
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6" 
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

style.css

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

VEYA style.css

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}

Bunu şu şekilde yapabilirsiniz:

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}

Aynı problem için bir logo listesi oluşturmak için bir çözüm arıyordum.

Eski tarayıcılar için endişelenmediğimiz için bizim için çalışan, biraz flexbox kullanan bu çözümü buldum.

Bu örnekte 100x100px bir kutu varsayılıyor, ancak boyutun esnek / duyarlı olabileceğinden oldukça eminim.

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

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

ps .: bazı önekler eklemeniz veya otomatik ön ek kullanmanız gerekebilir.

Andi Wilkinson'ın cevabına (ikincisi) dayanarak, biraz iyileştim, görüntünün merkezinin gösterildiğinden emin oldum (kabul edilen cevabın yaptığı gibi):

HTML:

<div class="crop">
   <img src="img.png">
</div>

CSS:

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}

CSS dosyasında yükseklik ve genişlik parametrelerini ayarlayın

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}

.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

Görüntü boyutunu div ile aynı yapacaksınız ve div boyutunu buna göre değiştirmek için önyükleme ızgarasını kullanabilirsiniz.

Görüntü boyutu div yüksekliğine ve genişliğine bağlı değildir,

css'de img öğesini kullanın

İşte size yardımcı olacak css kodu

div img{
         width: 100px;
         height:100px;
 }

div boyutuna göre ayarlamak istiyorsanız

bunu kullan

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

bu kod ile resminiz orijinal boyutta gösterilir ancak ilk 100x100 piksellik taşma gösterildiğinde gizlenir

Kod olmadan size yardımcı olmak zordur, ancak işte size bazı pratik tavsiyeler:

"Görüntü duvarınızın" stil vermek için bir id veya sınıf içeren bir tür kapsayıcıya sahip olduğundan şüpheleniyorum.

Örneğin:

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

Kodunuz yukarıdakine benzer şekilde ayarlanmışsa, logonuz gibi diğer resimleri etkilemeden, resim duvarınız için tüm resimlerde bir boyut stilini ayarlamak kolaydır.

#imagewall img {
  width: 100px;
  height: 100px; }

Ancak resimleriniz tam olarak kare değilse, bu yöntem kullanılarak eğriltilecektir.

CSS dosyanıza gidin ve tüm resimlerinizi aşağıdaki gibi yeniden boyutlandırın

img {
  width:  100px;
  height: 100px;
}