How can I make images fit into a 200 pixel square box using CSS?
-
19-09-2019 - |
Question
I have a bunch of images which all fit into a 400px × 400px box (that is, one of their dimensions is 400px and the other is smaller). I would like to be able to, using CSS, but jquery/javascript if necessary, fit that image to a 200px by 200px box, so that two edges of the image touch the box, and there is a gap between the other two edges of the box. Aspect ratio must be maintained.
My HTML is as follows:
<div class="small">
<img src="/images/photos/View.jpg" alt="View" />
</div>
And my CSS is:
div.images div.small
{
width:200px;
height:200px;
line-height:200px;
text-align:center;
}
div.images div.small img
{
vertical-align:middle;
max-width:200px;
max-height:200px;
}
You can see a sample here.
Unfortunately, my landscape images hug the top of the box, whereas I would like them to be centered. Also, I'm not sure of the wisenees of relying upon max-width
/max-height
.
How can I center my images within these boxes?
Solution
I set this up on my computer and it worked fine. After looking at your example page, the problem is because you've set the image to display:block
. Either remove that rule from your general img
rule (weird thing to set globally, anyway), or change the image rule you posted above to this:
div.images div.small img
{
vertical-align: middle;
max-width: 200px;
max-height: 200px;
display: -moz-inline-box; /* Firefox 2 */
display: inline-block;
}
By default, the img
element and other "replaced" elements (Flash, etc) are "inline-block" - this means they flow inline like text, but have a width and height.
OTHER TIPS
I needed to do the same some time ago, and I found a good implementation in this link. "Center an image inside a div, vertical and horizontal, without knowing the image's size".
It works for me as intended.
I ran into this vertical centering problem once and to get it working correctly in all browsers, I resorted to javascript / jQuery:
$(document).ready(function() {
$('img').each(function() {
image_height = $(this).height();
margin_top = (200 - image_height) / 2;
$(this).css('margin-top', margin_top + 'px');
});
});
Please note that you will need $(window).load instead of $(document).ready if the image dimensions are not given in the html.
have you tried using:
display:block;
margin-left:auto;
margin-right:auto;
that should center block level elements
Here is a solution that will work no matter what size you want. It will downscale but not upscale, center both vertically and horizontally, and only uses CSS. It took me a while to figure it out.
Put your <img>
inside a <div>
, then position the div as you want (i.e., give it the size you want, make sure to set the position
attribute), then apply this:
.mydiv > .myimg {
vertical-align: bottom;
max-height: 100%;
max-width: 100%;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}