Jak mogę sprawić, by wszystkie obrazy o różnej wysokości i szerokości były takie same za pomocą CSS?

Staram się stworzyć ścianę wizerunkową składającą się ze zdjęć produktów. Niestety wszystkie mają różną wysokość i szerokość. Jak mogę użyć CSS, aby wszystkie obrazy miały ten sam rozmiar? najlepiej 100 x 100.

Myślałem o zrobieniu div o wysokości i szerokości 100px, a następnie o tym, jak go wypełnić. NIE wiem, jak to zrobić.

Jak mogę to osiągnąć?

Zaktualizowana odpowiedź (brak obsługi IE11)

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">

Oryginalna odpowiedź

.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>

czy mogę po prostu dorzucić, że jeśli zbyt mocno zniekształcisz obrazy, tj. wyjmiesz je z proporcji, mogą nie wyglądać dobrze - niewielka ilość jest w porządku, ale jednym ze sposobów jest umieszczenie obrazów w „pojemniku” i ustaw kontener na 100 x 100, a następnie ustaw obraz na brak przepełnienia i ustaw najmniejszą szerokość na maksymalną szerokość kontenera, to jednak przycina kawałek obrazu,

na przykład

<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;
}

W ten sposób obraz zachowa rozmiar swojego kontenera, ale zmieni rozmiar bez łamania ograniczeń

Najprostszy sposób - Zachowa rozmiar obrazu bez zmian i wypełni inny obszar spacją, w ten sposób wszystkie obrazy będą zajmować tę samą określoną przestrzeń, niezależnie od rozmiaru obrazu, bez rozciągania

.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;

}

Możesz użyć tej object-fitwłaściwości do zmiany rozmiaru imgelementów:

• coverrozciąga lub zmniejsza obraz proporcjonalnie, aby wypełnić pojemnik. W razie potrzeby obraz jest przycinany w poziomie - lub - w pionie.
• contain rozciąga lub zmniejsza obraz proporcjonalnie, aby zmieścić się w pojemniku.
• scale-down zmniejsza proporcjonalnie obraz, aby zmieścił się w pojemniku.

.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>

W powyższym przykładzie: czerwony to krajobraz, zielony to portret, a niebieski to kwadratowy obraz. Wzór w kratkę składa się z kwadratów 16x16px.

Dla tych, którzy używają Bootstrap i nie chcą stracić responsywności, po prostu nie ustawiaj szerokości kontenera. Poniższy kod jest oparty na poście Gillytech .

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%;
}

LUB style.css

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

Możesz to zrobić w ten sposób:

 .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%;
}

Szukałem rozwiązania tego samego problemu, aby stworzyć listę logo.

Wymyśliłem to rozwiązanie, które wykorzystuje trochę flexboksa, które działa dla nas, ponieważ nie martwimy się o stare przeglądarki.

W tym przykładzie założono pudełko 100x100px, ale jestem prawie pewien, że rozmiar może być elastyczny / responsywny.

.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 .: może być konieczne dodanie przedrostków lub użycie autoprefiksera.

Opierając się na odpowiedzi Andi Wilkinsona (drugiej), poprawiłem się trochę, upewnij się, że środek obrazu jest pokazany (tak jak zrobiła to zaakceptowana odpowiedź):

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+ */
}

Ustaw parametry wysokości i szerokości w pliku CSS

.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;
 }

Rozmiar obrazu będzie taki sam jak div i możesz użyć siatki bootstrap, aby odpowiednio manipulować rozmiarem div

Rozmiar obrazu nie zależy od wysokości i szerokości div,

użyj elementu img w css

Oto kod CSS, który Ci pomoże

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

jeśli chcesz ustawić rozmiar według div

Użyj tego

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

za pomocą tego kodu obraz zostanie wyświetlony w oryginalnym rozmiarze, ale pokaże pierwsze przepełnienie 100x100px zostanie ukryte

Bez kodu trudno jest ci to pomóc, ale oto kilka praktycznych porad:

Podejrzewam, że twoja „ściana obrazu” ma jakiś pojemnik z identyfikatorem lub klasą, aby nadać jej style.

na przykład:

<body>

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

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

Stylizacja rozmiaru na wszystkich obrazach ściany z obrazami bez wpływu na inne obrazy, takie jak logo itp., Jest łatwa, jeśli kod jest skonfigurowany podobnie do powyższego.

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

Ale jeśli obrazy nie są idealnie kwadratowe, zostaną przekrzywione przy użyciu tej metody.

Przejdź do pliku CSS i zmień rozmiar wszystkich obrazów w następujący sposób

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