Reputation: 28188
Working a responsive site, so I cannot use set widths.
I need pictures to all crop to square. I cannot define the exact measurements because it also needs to have max-width:100%
in order to make it a responsive image which adjusts it's sized relative to the container (which is relative to the width of the browser).
I've seen a lot of solutions that suggest using background-image
but this not possible, it must be an img
tag. It also must 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>
Upvotes: 8
Views: 16720
Reputation: 2366
using padding-bottom
along with positioning and overflow:hidden
you can create a responsive 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%;
}
jQuery DEMO center images when scaling
I tidied up some of the js allowing multiple images to be scaled and put 4 images on a simple grid
Upvotes: 25
Reputation: 1364
You can do something like overflow:hidden I've made a square of 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;
}
Upvotes: -3