Bagaimana saya bisa membuat semua gambar dengan tinggi dan lebar berbeda sama melalui CSS?

Saya mencoba membuat gambar dinding yang terdiri dari foto produk. Sayangnya, semuanya memiliki tinggi dan lebar yang berbeda. Bagaimana saya bisa menggunakan css agar semua gambar terlihat berukuran sama? sebaiknya 100 x 100.

Saya berpikir untuk melakukan div yang memiliki tinggi dan lebar 100px dan kemudian bagaimana cara mengisinya. TIDAK yakin bagaimana melakukan itu.

Bagaimana saya bisa melakukannya?

Jawaban yang diperbarui (Tidak ada dukungan 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">

Jawaban asli

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

Dapatkah saya membuangnya jika Anda mendistorsi gambar Anda terlalu banyak, yaitu mengeluarkannya dari rasio, gambar tersebut mungkin tidak terlihat benar, - jumlah kecil tidak masalah, tetapi salah satu cara untuk melakukannya adalah meletakkan gambar di dalam 'wadah' dan atur wadah ke 100 x 100, kemudian atur gambar Anda menjadi tidak melimpah, dan setel lebar terkecil ke lebar maksimum wadah, ini akan memotong sedikit gambar Anda,

sebagai contoh

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

Dengan cara ini gambar akan tetap berukuran penampungnya, tetapi akan diubah ukurannya tanpa melanggar batasan

Cara termudah - Ini akan menjaga ukuran gambar sebagaimana adanya dan mengisi area lain dengan ruang, dengan cara ini semua gambar akan mengambil ruang yang ditentukan sama terlepas dari ukuran gambar tanpa meregang

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

}

Anda dapat menggunakan object-fitproperti untuk mengukur imgelemen:

• covermeregangkan atau mengecilkan gambar secara proporsional untuk mengisi wadah. Gambar dipotong secara horizontal -atau- vertikal jika perlu.
• contain meregangkan atau mengecilkan gambar secara proporsional agar muat di dalam wadah.
• scale-down mengecilkan gambar secara proporsional agar pas di dalam penampung.

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

Pada contoh di atas: merah adalah lanskap, hijau adalah potret dan biru adalah gambar persegi. Pola kotak-kotak terdiri dari kotak 16x16px.

Bagi mereka yang menggunakan Bootstrap dan tidak ingin kehilangan responsivitasnya, jangan mengatur lebar containernya. Kode berikut didasarkan pada posting 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%;
}

ATAU style.css

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

Anda bisa melakukannya dengan cara ini:

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

Saya sedang mencari solusi untuk masalah yang sama ini, untuk membuat daftar logo.

Saya datang dengan solusi ini yang menggunakan sedikit flexbox, yang berfungsi untuk kami karena kami tidak khawatir tentang browser lama.

Contoh ini mengasumsikan kotak 100x100px tetapi saya cukup yakin ukurannya bisa fleksibel / responsif.

.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 .: Anda mungkin perlu menambahkan beberapa prefiks atau menggunakan autoprefixer.

Berdasarkan jawaban Andi Wilkinson ( jawaban kedua), saya sedikit meningkatkan, pastikan bagian tengah gambar sudah ditampilkan (seperti jawaban yang diterima):

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

Atur parameter tinggi dan lebar dalam file 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;
 }

Anda akan membuat ukuran gambar sama dengan div dan Anda dapat menggunakan grid bootstrap untuk memanipulasi ukuran div yang sesuai

Ukuran gambar tidak tergantung pada tinggi dan lebar div,

gunakan elemen img di css

Berikut adalah kode css yang membantu Anda

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

jika Anda ingin mengatur ukuran dengan div

Gunakan ini

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

dengan kode ini, gambar Anda ditampilkan dalam ukuran asli tetapi tampilan 100x100px pertama akan disembunyikan

Tanpa kode ini sulit membantu Anda, tetapi berikut ini beberapa saran praktis untuk Anda:

Saya menduga bahwa "dinding gambar" Anda memiliki semacam wadah dengan id atau kelas untuk memberikan gaya.

misalnya:

<body>

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

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

Memberi gaya ukuran pada semua gambar untuk dinding gambar Anda, sementara tidak memengaruhi gambar lain, seperti logo Anda, dll. Mudah dilakukan jika kode Anda diatur serupa dengan yang di atas.

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

Tetapi jika gambar Anda tidak berbentuk persegi sempurna, gambar akan miring menggunakan metode ini.

Buka file CSS Anda dan ubah ukuran semua gambar Anda sebagai berikut

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