CSS Challenge - expand and center an image

That’s first of (I hope) many posts with such an idea. Problems solved with pure CSS. No JavaScript. I’m working on a gallery type site and I need to show photos. Of course the size of the images is unknown.[STOP]

The following sketch illustrates the situation:

CSS challenge

I.e. I have a div, wrapper which contains an image tag. The picture should expand and fill the parent element. Together with that it should be centered vertically/horizontally. The size of the image and the container could vary.

1 <div class="wrapper">
2 	<img src="pic.jpg" />
3 </div>

Let’s say that the wrapper has the following CSS applied:

1 .wrapper {
2     width: 400px;
3     height: 200px;
4     overflow: hidden;
5 }

As I said, the dimensions of the container could vary. The solution should work even with 400x200. And remember, I can’t use JavaScript to get the size of the image, make calculations or change CSS properties.

What I tried and it didn’t work

The very first thing, which I did was to apply max-width: 100% to the image tag. The photo was successfully resized to exactly 400px by width. The problem was that it wasn’t centered and, more importantly if the image was small and its width was less then 400px there was some unfilled space. So, I replaced max-width with simply width. This guaranteed that the image will be resized to exactly 400px no matter what. The first step was made and I thought that I was in the right direction.

The next thing, which I had to fight with was the centering. I tried several variants with negative margin or padding. The absolution positioning or the usage of percentages didn’t help. It looked that it is not possible to cover all the cases without to use JavaScript.

Even if the above problem is solved that will be only 50% of the job, because if the width of the wrapper is less then its height everything starts from the beginning. So, I wasn’t able to figure out how to make the things in the CSS styling. I had to change the markup and try again.

The solution

During the development of krasimirtsonev.com I used background-size: cover. What it does is to resize your background image like that so it fills all the available space. So, the first thing which I did is to set the image as a background of the wrapper.

1 <div class="wrapper" style="background-image: url('pic1.jpg');"></div>

Yes, I know that inline styling is not a good idea. Also the missing of img tag means that search engines will not parse very well my images. Anyway, the type of the project allows those sacrifices.

After that I added background-size: cover to the wrapper’s styles:

1 .wrapper {
2 	width: 400px;
3     height: 200px;
4     overflow: hidden;
5     background-size: cover;
6 }

Only this property solves half of the problem. After that resizing the image matched my criterias.

Another useful property is background-position. I added background-position: center center and voila - mission completed.