CSS Image Uniform-To-Fill Stretch?


I'm trying to port a bit of Silverlight code to CSS because a client asked me to, and I'm a little stuck. The Silverlight app is used to display 5 images across the top of the webpage, and the Stretch property of each Image object is set to UniformToFill, which doesn't stretch the source image but scales the source image so it fits within the bounds of the Image object, and keeps the source image centered within the Image object.

I was wondering if there was a way to accomplish this in CSS, and if I have to use CSS3 that is fine as well (or if there's a way in HTML5). I haven't been doing HTML/CSS web development in a while so forgive me if I'm a little rusty.

Many thanks!

Problem courtesy of: Ian Wold


you could do this using percentage widths on the images themselves:


    display: block;
    width: 20%;
    float: left;
Solution courtesy of: Max Girkens


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.