Crop image to square using percent and maximum width

Question

Working with a responsive site, so I can’t use the width of the set.

I need pictures for all the lessons. I cannot determine the exact measurements, since it must also have max-width:100% in order to make it a responsive image that adjusts it relative to the container (which is relative to the width of the browser).

I have seen many solutions that suggest using background-image , but this is not possible, it should be an img tag. It should also work in IE8.

Any ideas?

I currently have:

 .views-field-field-photo img { width: 100%; height: auto; } <div class="field-content"> <img src="imagehere" > </div> 

Answer 1

using padding-bottom along with positioning and overflow:hidden , you can create a flexible square container:

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

I removed some of js, allowing me to scale multiple images and put 4 images in a simple grid

Answer 2

You can do something like overflow: hidden I made a square 100px, you can define your own size.

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