CSS - Test Your CSS Skills Number 40 - Dead Centre: Quiz now ended - Solution in post #32
Important:
Don’t post your answers in this thread but PM with the details instead so that all can have a go.
This quiz is taken from a real life situation and although the solution should probably have been catered for with the back-end code we are going to do it using CSS only.
The task is this:
You have an image gallery that displays random images from your database in img tags in your html. The images are all various sizes and you have no control over what size the image will be.
The design calls for the images to be shown in a 200px x 200px square regardless of the size of the image however the image should not be resized.
At present the client is simply hiding the overflow but this display is ugly and the effect can be seen in the attachment called “dead-centre-not”. As you can see the small images hug the top left corner while large images show just blue sky background (note that the blue background is also part of the image so imagine perhaps its the sky).
What the task requires is that all images be centred horizontally and vertically within the 200px x 200px square which means that small images will be centred nicely and very large images will just show the centre portion of the image which in most cases is likely to be the important part of the image rather than just a flash of sky at the top. You cannot change the size of the image either by html or css so the solution must work for an image at the size the image is.
You can see from the second attachment “dead-centre-ok” how dramatically our display has been improved now that everything is centred.
The important part to remember with this task is that you don’t know the size of the image so that means you can’t shift each one by the required amount of pixels to make it centre. You must find a technique that automatically centres the images no matter what size they are (within reason).
No scripting allowed but the result must work from IE6+.
Remember we are looking for an automatic way so you can’t simply set up classes and place the image as a background image of the div because then you would need to know the image name in advance.
Here is some starting code but you are allowed to change the css and html as required (within the restrictions already mentioned) as long as you keep the display to 200px x 200px.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.gallery {
margin:0;
padding:0;
list-style:none;
}
.gallery li {
width:200px;
height:200px;
overflow:hidden;
border:1px solid #000;
float:left;
margin:10px;
display:inline;
}
.gallery li img {
border:1px solid #000;
}
</style>
</head>
<body>
<ul class="gallery">
<li><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></li>
<li><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></li>
</ul>
</body>
</html>
You can link to my images for testing purposes.
Rules
Images must be centred horizontally and vertically within the 200px x 200px square as per my screenshot.
The image tags must remain in the html and you can’t simply type background images into the list element instead (although the effect would be the same as we are looking for).
You cannot change the size of the image either by html or css so the solution must work for an image at the size the image is.
Must work in IE6+ and modern Safari, Chrome, Firefox and Opera etc.
Must work automatically and not reliant on the sizes of the images.
Valid html and css (css2.1 or 3) (but I am also interested in non valid approaches if its interesting).
No scripts of any kind.
You can use whatever CSS and html you like apart from restrictions already mentioned.
To Recap:
You must use the image tags in the html and the images must not be resized to fit (either by css or html) and you cannot use background images because you don’t know what the image names are through css only.
I think that covers everything but if anything is still unclear or I have made an error in my logic then just shout. The winner won’t necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).
Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are.
Don’t post your answers in this thread but PM with the details instead so that all can have a go.
Have fun.
PS. : In case you missed the other tests you can find them all listed here:
