javascript - How can I make images fit into a 200 pixel square box using CSS? - Stack Overflow

admin管理员组

文章数量:1203210

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?

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?

• javascript
• css
• image
• bounding-box

Share Improve this question Follow edited Sep 2, 2009 at 16:22 Eric asked Aug 24, 2009 at 14:57 EricEric 97.6k5454 gold badges254254 silver badges388388 bronze badges 1

• Only I've been able to do vertical centering is to calculate the size of the parent and the size of the child and then set the child's position relative to the parent so that it is centered. Max-Width & max-Weight are ok if the browsers your targeting support them. – JoshBerke Commented Aug 24, 2009 at 15:18

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 12

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.

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

本文标签： javascriptHow can I make images fit into a 200 pixel square box using CSSStack Overflow