Cắt hình ảnh thành hình vuông theo tỷ lệ phần trăm và chiều rộng tối đa

Question

Làm việc trang web đáp ứng, vì vậy tôi không thể sử dụng độ rộng đã đặt.

Tôi cần hình ảnh cho tất cả các cây trồng thành hình vuông. Tôi không thể xác định các phép đo chính xác bởi vì nó cũng cần phải có max-width:100% để làm cho nó trở thành một hình ảnh đáp ứng điều chỉnh kích thước của nó tương đối so với container (có liên quan đến chiều rộng của trình duyệt).

Tôi đã thấy rất nhiều giải pháp đề xuất sử dụng background-image nhưng điều này là không thể, nó phải là thẻ img. Nó cũng phải hoạt động trong IE8.

Bất kỳ ý tưởng nào?

Tôi hiện có:

.views-field-field-photo img { 
    width: 100%; 
    height: auto; 
    } 



    <div class="field-content"> 
<img src="imagehere" > 
</div> 

Answer 1

Bạn có thể làm một cái gì đó giống như overflow: hidden Tôi đã thực hiện một hình vuông 100px bạn có thể xác định kích thước của riêng bạn.

HTML

<div id="frame"> 
<img src="your image"/> 
</div> 

CSS

#frame{ 
width:100px; 
height:100px; 
overflow:hidden; 
} 

#frame img{ 
width:auto; 
height:100%; 
min-width:100px; 
min-height:100px; 
} 

Answer 2

sử dụng padding-bottom cùng với vị trí và overflow:hidden bạn có thể tạo một container vuông đáp ứng:

.field-content{ 
    width:80%; 
    padding-bottom:80%; 
    margin:1em auto; 
    overflow:hidden; 
    position:relative; 
    background:#000 
} 

.field-content img { 
    position:absolute; 
    width:auto; 
    min-width:100%; 
    min-height:100%; 
} 

DEMO

jQuery DEMO center images when scaling

tôi tidied lên một số js cho phép nhiều hình ảnh được thu nhỏ lại và đưa 4 hình ảnh trên một mạng lưới đơn giản