Saya tahu bahwa tidak mungkin untuk benar-benar mengubah gambar dengan CSS, itulah sebabnya saya memberi tanda kutip.

Yang ingin saya lakukan adalah mengambil gambar persegi panjang dan menggunakan CSS untuk membuatnya tampak persegi tanpa mengubah gambar sama sekali.

Saya pada dasarnya ingin mengubah ini:

Ke dalam ini:

Dengan asumsi mereka tidak harus berada di tag IMG ...

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

EDIT: Jika div perlu menautkan suatu tempat, sesuaikan saja HTML dan Styles seperti ini:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

Catatan ini juga dapat dimodifikasi agar responsif, misalnya% lebar dan tinggi dll.

Solusi CSS murni tanpa pembungkus divatau kode tidak berguna lainnya:

img {
  object-fit: cover;
  width:230px;
  height:230px;
}

1. Tempatkan gambar Anda dalam div.
2. Berikan dimensi persegi eksplisit div Anda.
3. Atur properti CSS overflow pada div ke hidden ( overflow:hidden).
4. Masukkan imajinasi Anda di dalam div.
5. Keuntungan.

Sebagai contoh:

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>

Menggunakan ukuran latar belakang: penutup - http://codepen.io/anon/pen/RNyKzB

CSS:

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}  

Markup:

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

Saya benar-benar menemukan masalah yang sama baru-baru ini dan berakhir dengan pendekatan yang sedikit berbeda (saya tidak dapat menggunakan gambar latar belakang). Memang membutuhkan sedikit jQuery meskipun untuk menentukan orientasi gambar (saya yakin Anda bisa menggunakan JS biasa saja).

Saya menulis posting blog tentang itu jika Anda tertarik pada penjelasan lebih lanjut tetapi kode ini cukup sederhana:

HTML:

<ul class="cropped-images">
  <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
  <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>

CSS:

li {
  width: 150px; // Or whatever you want.
  height: 150px; // Or whatever you want.
  overflow: hidden;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
li img {
  max-width: 100%;
  height: auto;
  width: auto;
}
li img.landscape {
  max-width: none;
  max-height: 100%;
}

jQuery:

$( document ).ready(function() {

    $('.cropped-images img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});

Jika gambar dalam wadah dengan lebar responsif :

HTML

<div class="img-container">
  <img src="" alt="">
</div>

CSS

.img-container {
  position: relative;

  &::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

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

Saya memiliki masalah serupa dan tidak dapat "berkompromi" dengan gambar latar belakang. Saya datang dengan ini.

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.container {
    position: relative;
    width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff; /* just to separate the images */
    overflow: hidden; /* "crop" the image */
    background: #000; /* incase the image is wider than tall/taller than wide */
}

.container img {
    position: absolute;
    display: block;
    height: 100%; /* all images at least fill the height */
    top: 50%; /* top, left, transform trick to vertically and horizontally center image */
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

Semoga ini membantu!

Contoh: https://jsfiddle.net/cfbuwxmr/1/

Gunakan CSS: overflow:

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}

Baik gunakan div dengan dimensi persegi dengan gambar di dalam dengan kelas .testimg:

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

atau div persegi dengan latar belakang gambar.

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

Berikut beberapa contoh: http://jsfiddle.net/QqCLC/1/

DIPERBARUI OLEH PUSAT GAMBAR

.test {
  width: 307px;
  height: 307px;
  overflow: hidden
}

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

<div class="test2"></div>

object-fit: cover akan melakukan apa yang Anda butuhkan.

Tapi itu mungkin tidak berfungsi di IE / Edge. Ikuti seperti yang ditunjukkan di bawah ini untuk memperbaikinya dengan hanya CSS untuk bekerja di semua browser .

Pendekatan yang saya ambil adalah memposisikan gambar di dalam wadah dengan absolut dan kemudian meletakkannya tepat di tengah menggunakan kombinasi:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Setelah itu di tengah, saya berikan pada gambar,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Ini membuat gambar mendapatkan efek dari Object-fit: cover.

Berikut ini adalah demonstrasi dari logika di atas.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Logika ini berfungsi di semua browser.

Gambar asli

Dipotong Secara Vertikal

Dipotong Secara horizontal