Tôi biết rằng thực sự không thể sửa đổi một hình ảnh bằng CSS, đó là lý do tại sao tôi đặt crop trong dấu ngoặc kép.

Những gì tôi muốn làm là chụp ảnh hình chữ nhật và sử dụng CSS để làm cho chúng trông vuông mà không làm biến dạng hình ảnh.

Về cơ bản tôi muốn bật cái này:

Vào đây:

Giả sử họ không phải ở trong thẻ 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: Nếu div cần liên kết ở đâu đó, chỉ cần điều chỉnh HTML và Kiểu như vậy:

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 }

Lưu ý rằng điều này cũng có thể được sửa đổi để đáp ứng, ví dụ% chiều rộng và chiều cao, v.v.

Một giải pháp CSS thuần túy không có trình bao bọc divhoặc mã vô dụng khác:

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

1. Đặt hình ảnh của bạn trong một div.
2. Cung cấp cho div kích thước vuông rõ ràng của bạn.
3. Đặt thuộc tính tràn CSS trên div thành hidden ( overflow:hidden).
4. Đặt trí tưởng tượng của bạn bên trong div.
5. Lợi nhuận.

Ví dụ:

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

Sử dụng kích thước nền: bìa - 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;
}  

Đánh dấu:

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

Tôi thực sự đã gặp phải vấn đề tương tự gần đây và kết thúc bằng một cách tiếp cận hơi khác (tôi không thể sử dụng hình nền). Mặc dù vậy, nó đòi hỏi một chút jQuery để xác định hướng của hình ảnh (tôi chắc chắn rằng bạn có thể sử dụng JS đơn giản thay thế).

Tôi đã viết một bài đăng trên blog về nó nếu bạn muốn giải thích thêm nhưng mã này khá đơn giản:

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

});

Nếu hình ảnh nằm trong một thùng chứa có chiều rộng đáp ứng :

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

Tôi đã có một vấn đề tương tự và không thể "thỏa hiệp" với hình ảnh nền. Tôi nghĩ ra cái này

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

Hi vọng điêu nay co ich!

Ví dụ: https://jsfiddle.net/cfbuwxmr/1/

Sử dụng CSS: tràn:

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

Sử dụng div có kích thước vuông với hình ảnh bên trong với lớp .testimg:

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

.testimg {
    margin-left: -76px

}

hoặc một div vuông với nền của hình ảnh.

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

Dưới đây là một số ví dụ: http://jsfiddle.net/QqCLC/1/

CẬP NHẬT NHƯ CÁC TRUNG TÂM HÌNH ẢNH

.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 sẽ làm chính xác những gì bạn cần.

Nhưng nó có thể không hoạt động trên IE / Edge. Thực hiện theo như hình dưới đây để sửa nó chỉ bằng CSS để hoạt động trên tất cả các trình duyệt .

Cách tiếp cận tôi thực hiện là định vị hình ảnh bên trong thùng chứa một cách tuyệt đối và sau đó đặt nó ngay tại trung tâm bằng cách sử dụng kết hợp:

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

Khi nó ở giữa, tôi đưa ra hình ảnh,

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

Điều này làm cho hình ảnh có được hiệu ứng của Object-fit: cover.

Dưới đây là một minh chứng về logic trên.

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

Logic này hoạt động trong tất cả các trình duyệt.

Ảnh gốc

Cắt theo chiều dọc

Cắt ngang