Clip images with HTML and CSS

html css image clip
Francisc picture Francisc · Aug 17, 2011 · Viewed 12.8k times · Source

I want to display images in a 144px x 144px div element. Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.

How can I do this and have it work on older browsers like IE as well?

EDIT:
Changed the image, the first was wrong, sorry. Resize the image so that inside the div there is no space without image
enter image description here

Answer

Cfreak picture Cfreak · Aug 17, 2011

Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.

Related questions

How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
Responsive image align center bootstrap 3

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the center of the …

Read More
CSS Display an Image Resized and Cropped

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I …

Read More