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


89

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?


1
buat tinggi / lebar divs tetap, lalu isi gambar dengan sebuah overflow:none, dan pusatkan gambar secara horizontal / vertikal di dalam div.
Marc B

2
@MarcB saya kira maksud Anda overflow: hidden;. :)
masukkan nama penggunadi sini

1
@MarcB tidak ada seperti itu overflow:nonedi css. Bahkan overflow:hiddentidak akan menyelesaikan masalah.
Rajesh Paul

Jawaban:


175

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>


2
jawaban yang luar biasa! bekerja untuk perpustakaan seperti Angular dan Vue juga ketika ingin pengguna repeater!
Matt Catellier

1
penggunaan div sebagai ganti img bisa berdampak pada seo (tidak yakin)
Muhammad Ali Mansoor

@MuhammadAliMansoor bisa jika Anda tidak mengkompensasi dengan mikrotadatas. Saya memperbarui jawaban saya untuk mencapai hasil yang sama dengan tag img dan objek-fit, yang sekarang memiliki dukungan yang baik.
Simon Arnold

1
Mengapa ini tidak terjadi di seluruh internet? Ia bahkan bekerja dengan% lebar!
Liz

33

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


Ini adalah metode pilihan saya. Ini lebih praktis daripada menggunakan latar belakang.
gillytech

1
Ini jelas merupakan pilihan yang lebih baik, gambar saya tidak terdistorsi di al.l
pwborodich

32

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;

}

1
Wow, sesederhana itu. Mungkin jawaban lain "benar", tetapi yang ini paling mudah diterapkan.
Randall Arms Jr.

5
Satu-satunya peringatan untuk ini adalah bahwa tidak ada dukungan IE11.
Romuloux

Keuntungan dari ini adalah bahwa gambar Anda tidak terpotong atau miring, tetapi sisi negatifnya adalah gambar-gambar itu masih belum tentu tampil dalam ukuran yang sama. Daripada object-fit: scale-down, Anda juga dapat mencoba object-fit: cover.
Vincent

19

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.


1
Ini bagus kecuali tidak berfungsi untuk versi IE mana pun. caniuse.com/#feat=object-fit
Jameela Huq

3

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

3

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

1

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.


1

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

1

Atur parameter tinggi dan lebar dalam file CSS

.ImageStyle{

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


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


0

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


0

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.


0

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

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

sederhana dan lurus!
KiwenLau
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.