8

I have a site that has a bunch of different images to display, all of different resolutions and aspect ratios. Is there an easy way in CSS to resize and crop images to a certain resolution? For my purposes, I want the resized image to be 280x280.

Of course I can just set <img height = '280' width = '280' /> but this will stretch it. I'd like it to the smaller of the two resolutions, make a square, and then take the center pixels. For example, if the resolution is 480x200 I want it to take a 200x200 section out of the center of the image.

I've tried Googling, but to no avail.

jas7457
  • 1,971
  • 5
  • 30
  • 47
  • I doubt you can do it with CSS – revolver Feb 26 '13 at 07:39
  • How about php? My site uses php, so this is an option as well, unless it slows down the website a lot. – jas7457 Feb 26 '13 at 07:40
  • Does this answer your question? [How to automatically crop and center an image](https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image) – icc97 Sep 06 '22 at 09:23

5 Answers5

9

a "real crop" of images with css isn't possible. Real Crop means the the image is reduced to the new values and also it's size is smaller then before.

But there is a solution with negative margins or absolute positioning, which will help you a lot. I've used this technique many times.

Please take a look at: Cropping images with CSS

emjay
  • 1,491
  • 5
  • 17
  • 35
2

You could use the clip property, meant to crop elements.

I wrote a tutorial about it a couple of weeks ago at Codrops: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/.

0

If you set the image as a CSS background, you can use background-size: cover|contain.

Rowno
  • 3,325
  • 2
  • 23
  • 14
0

I actually came across this same problem recently and ended up with a slightly different approach to the background-image way. The other main difference is that my way doesn't assume to know the width and height of the image - so it will work dynamically with any image. It does require a tiny bit of jQuery though to determine the orientation of the images (I' sure you could use plain JS instead though).

I wrote a blog post about it if you are interested in more explaination but the code is pretty simple:

HTML:

<ul class="cropped-images">
  <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
  <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>

CSS:

li {
  width: 150px; // Or whatever you want.
  height: 150px; // Or whatever you want.
  overflow: hidden;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
li img {
  max-width: 100%;
  height: auto;
  width: auto;
}
li img.landscape {
  max-width: none;
  max-height: 100%;
}

jQuery:

$( document ).ready(function() {

    $('.cropped-images img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});
FreddyBushBoy
  • 557
  • 4
  • 8
-1

You can set the size of all images on your website with CSS:

img {
    width: 280px;
    height: 280px;
}

The problem is, that some images will look strange because of their aspect radio. The best thing would be to create different sizes of each image (better known as thumbnails) when you upload them. Noot on runtime, that would take to long.

Chris
  • 4,255
  • 7
  • 42
  • 83
  • 3
    Don't think you really read my question. I run a music blog and I need something to dynamically scale/crop the pictures for each post. I don't want to just stretch them, as I said in my question. – jas7457 Feb 26 '13 at 07:44
  • Yes, that's why I told you you have to create thumbnails via PHP ;) – Chris Feb 26 '13 at 07:45
  • You didn't tell if users upload pictures or just link them. There is a big difference. – Chris Feb 26 '13 at 07:46
  • 1
    Not an answer to the question. OP specifically asked about CSS techniques. – ToolmakerSteve Dec 04 '14 at 21:38