Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make images fit into a 200 pixel square box using CSS?

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?

like image 855
Eric Avatar asked Aug 24 '09 14:08

Eric


People also ask

How do I make an image fit a box in CSS?

Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.

How do I scale an image to fit CSS?

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".

How do I change the pixel size of an image in CSS?

We can resize the image by specifying the width and height of an image. A common solution is to use the max-width: 100%; and height: auto; so that large images do not exceed the width of their container. The max-width and max-height properties of CSS works better, but they are not supported in many browsers.

How do I stretch an image to fit CSS?

When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.


1 Answers

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.

like image 131
DisgruntledGoat Avatar answered Oct 23 '22 22:10

DisgruntledGoat