Yüzdelerini ve maksimum genişliklerini kullanarak bir görüntüyü kırpın

Question

Duyarlı bir site çalışıyorum, bu yüzden ayarlanmış genişlikleri kullanamıyorum.

Tüm kırpmadan kareye kadar resimlere ihtiyacım var. Kesin ölçümleri tanımlayamıyorum, aynı zamanda kabaca (tarayıcı genişliğine göre) boyutuna göre ayarlanan duyarlı bir görüntü haline getirmek için max-width:100%'a da sahip olması gerekir.

background-image kullanılmasını öneren pek çok çözüm gördüm, ancak bu mümkün değil, bir img etiketi olmalıdır. Ayrıca IE8'de çalışmalıdır.

Herhangi bir fikrin var mı?

Şu anda var:

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



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

Answer 1

Sen taşma gibi bir şey yapabilirsiniz: Ben kendi boyutu tanımlayabilirsiniz 100 piksel bir kare yaptık gizli.

HTML

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

CSS konumlandırma ile birlikte padding-bottom ve kullanma

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

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

Answer 2

overflow:hidden Bir esnek kare kapsayıcı oluşturmak için:

.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

Birden görüntüleri ölçekli sağlayan js bazı derli toplu ve