CSS Image size, how to fill, not stretch?


Tags: css,image

Problem :

I have an image, and I want to set it a specific width and height (in pixels)

But If I set width and height using css (width:150px; height:100px), image will be stretched, and It may be ugly.

How to Fill images to a specific size using CSS, and not stretching it?

Example of fill and stretching image:

Original Image:

Original

Stretched Image:

Stretched

Filled Image:

Filled

Please note that in the Filled image example above: first, image is resized to 150x255 (maintained aspect ratio), and then, it cropped to 150x100.



Solution :

If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

While cover will give you a scaled up image, contain will give you a scaled down image. Both will preserve the pixel aspect ratio.

http://jsfiddle.net/uTHqs/ (using cover)

http://jsfiddle.net/HZ2FT/ (using contain)

This approach has the advantage of being friendly to Retina displays as per Thomas Fuchs' quick guide. http://cl.ly/0v2u190o110R

It's worth mentioning that browser support for both attributes excludes IE6-8. http://www.quirksmode.org/css/background.html


    CSS Howto..

    how to draw a vertical line between two option boxes using css

    in html and css how to get the box space to be smaller? [closed]

    How to Change Font-family using JQuery's .css() function?

    How to code certain css shapes?

    How to fix clipped text over 3D transform image on Safari?

    jQuery hide() method do show element with display:none !important

    How to change drop-down menu to drop-up menu

    How to reuse css styles from Telerik RadControls for ASP.NET Ajax

    How to style responsive table to make table like list?

    How to prevent embedded video from linking to another web page

    IE11 shows every display: table-cell element at a new line

    how to indent HTML forms on modals [closed]

    How to put the table inside the box

    How can I create a footer/toolbar in an iPhone web app?

    How to make a GWT-like CaptionPanel manually

    How to design a cross client / browser compatible email?

    How to remove an overhanging div

    How to remove “padding” from ionic card

    How do I make a (mock) bank system? [closed]

    How to set div width to the width of the table in it?

    How to put css and javascript in a common library/ project

    CSS: How to attach an arrow to a div and make it overlap the border

    how to make a h2 background image 'dynamic' in height as well

    How to stretch div height to fill parent div - CSS

    How do I take code from Codepen, and use it locally?

    How to align vertical elements as horizontal elements and shift to right side of the screen using CSS?

    How do i get a font to show up smooth like this?

    How can I center the page to allow background on sides?

    how to have spacing html/css

    JQuery : How to disable mouse move vertically?