Resize and crop image with CSS

Question

I\'d like to resize and crop an image of unknown dimensions, just with css. The image should be resized/cropped to completely fill a container of known dimensions, cutting o

Answer 1

You can set Image width and Height

### please Try It: http://jsfiddle.net/q9jFx/3/

Answer 2

There is a one way I can think of (maybe there are others?). Using negative translateY(-50%):

.container {
    width: 180px;
    height: 160px;
    overflow: hidden;
    border: red solid 2px;
    position: relative;
}
.container img {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%); 
}

Demo: http://jsfiddle.net/q9jFx/4/

So the trick is to set image positioned relatively to a container at the center (top and left 50%), and then move the image with translateY(-50%)`.

Support is pretty good too. It's IE9+ (use -ms prefix for IE9) and all modern browsers.

Answer 3

The only way you can achieve this only using css is to use the CSS background property combining it with the background-size and background-position properties.

SEE THIS FIDDLE

More information for these properties :
background-position
background-size

HTML:

<div class="container" style="background-image:url(http://www.recipestap.com/wp-content/plugins/wp-o-matic/cache/af4e1_ap.jpg)"></div>
<div class="container" style="background-image:url(http://3.bp.blogspot.com/-LAfvYIuz6c4/UpQxIe-FlmI/AAAAAAAAAcE/DVeCw1W6Yu4/s320/Eggless+Mini+Apple+Pie.JPG)"></div>

CSS:

.container { 
    width: 180px;
    height: 160px;
    border:red solid 2px;

    /* add following */
    background-size:cover;
    background-position:50% 50%;
}

---

ADDITIONAL INFORMATION

If you realy need the <img> tag for SEO reasons or other, you will need JS to face all the cases you may come through.

CASE 1 : image ratio is wider than container
Use height:100%; and width:auto; then you will need JS again to center the image in the container.

CASE 2 : image ratio is heigher than the container
Use width:100%; and height:auto; then JS or display:table;/display:table-cell to verticaly center the image in container.

I have used this technique on some projects but it is pretty heavy compared to the background CSS technique.

Answer 4

You could use clip() an old CSS rule http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ , but it is easy for known image size .

For unknown image size, but known container size, you can use line-height: /* height of container */; and text-align:center; to basicly center a single inline element in this container.

The single image then can be set with : vertical-align:middle; and negative margin to virtually reduce its size , lets say : margin:-50%;.

For image too big in first place, use min or max width height to reduce their size.

.container {
    width: 180px;
    height: 160px;
    overflow: hidden;
    border:red solid 2px
}
.container {
    line-height:160px;
    text-align:center;
}
.container img {
    vertical-align:middle;
    margin: -50%;
    min-width:100%;
    max-height:150%;
}

DEMO : http://jsfiddle.net/q9jFx/27/

a few other demo if this makes you curious : http://codepen.io/gcyrillus/pen/etxky , http://codepen.io/gcyrillus/pen/BdtEj , http://codepen.io/gcyrillus/pen/hyAmd (3 different test of zooming/cropping img) , within a basic slider http://codepen.io/gc-nomade/pen/Hdpku , test imgvs bg http://codepen.io/gcyrillus/pen/wsjBJ

Answer 5

Instead of an <img> you could give the div a background and set background-size: cover.

css:

background-image: url("yourimage"); background-size:cover; background-position:center center;

Answer 6

If you don't need to necessarily use the image tag, using the image as a background for the container can easily do what you want.

Jsfiddle sample: http://jsfiddle.net/zEP9L/

HTML:

<p>Don't want the white space. Instead, should crop width to fill complete container.</p>
<div class="container">
     <img src="http://www.recipestap.com/wp-content/plugins/wp-o-matic/cache/af4e1_ap.jpg" alt="alt" />
</div>

<p>This looks ok, but would like to control the crop - eg show the center of the image, not the top</p>

<div class="container">
     <img src="http://3.bp.blogspot.com/-LAfvYIuz6c4/UpQxIe-FlmI/AAAAAAAAAcE/DVeCw1W6Yu4/s320/Eggless+Mini+Apple+Pie.JPG" alt="alt" />
</div>

<p>This is an alternative option</p>
<div class="container" id="something">
</div>

CSS:

.container { width: 180px; height: 160px; overflow: hidden; border:red solid 2px }
.container img { width:100%}

#something {
    background-image: url("http://3.bp.blogspot.com/-LAfvYIuz6c4/UpQxIe-FlmI/AAAAAAAAAcE/DVeCw1W6Yu4/s320/Eggless+Mini+Apple+Pie.JPG");
    background-size: cover;
    background-position: center center;
}