Question

188

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

rated 0 times [ 191] [ 3] / answers: 1 / hits: 19539 / 15 Years ago, mon, august 24, 2009, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ignacio

Add To Favorites

Follow

Total Points: 467

Total Questions: 128

Total Answers: 79

Location: Luxembourg

Member since Tue, Mar 14, 2023

1 Year ago

ignacio questions

1 `npm install` fails on node-gyp rebuild with `env: python: No such file or directory` on mac pro m1

Tue, Aug 16, 22, 00:00, 2 Years ago

1 Invalid configFile (Cypress 10.0) - cannot find module

Fri, Jun 10, 22, 00:00, 2 Years ago

1 Switch' is not defined react/jsx-no-undef

Fri, Jun 4, 21, 00:00, 3 Years ago

1 Adding Header & Footer for all screens in JSPDF

Fri, Apr 23, 21, 00:00, 3 Years ago

1 Find the total of members online/offline Discord.js

Wed, Jul 22, 20, 00:00, 4 Years ago

View All

answered 15 Years ago brandon · Accepted Answer

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.