CSS: Disable image sizing / 'cropping' an image?

Question

I have a page with an inline-image that is about 4000px wide (good or bad practice, never mind). Is there a CSS way to 'crop' the image so it fits the viewport? Basically like background-size: cover, but for inline images.

As it is a responsive site, I have added this CSS rule for all images:

img { max-width: 100%; height: auto; }

Now, for the 'cropped' image, I tried everything with overflow, min- and max-width & -heigh, but I couldn't get it to work, the browser always fits the image to the viewport. Setting a value for min-height even resulted in a squashed image.

overflow: hidden; for the parent element (e.g. div) does not work? — Sami N
– Sami N, Commented Mar 25, 2013 at 19:18

Ibu · Accepted Answer · 2013-03-25 19:18:46Z

if you want to use css might aswell set the image using css:

Html:

<div class="img1"></div>

Css:

.img1 { background-image:url(yourimagepath); height: 200px; /** A set size*/ width: 300px; /** A set size*/ }

If you have to use the image tag, than you can use the overflow property:

HTML:

<div class="img1"> <img ....> </div>

CSS:

.img1 { height: 200px; /** A set size*/ width: 300px; /** A set size*/ overflow:hidden; }

Amy · Accepted Answer · 2013-03-25 19:23:59Z

You can wrap the <img> in a container to achieve the cropped effect.

See example: http://jsfiddle.net/amyamy86/GZzru/

HTML:

<div class="image"> <img src="http://www.bubblews.com/assets/images/news/616498554_1357418372.jpg" /> </div>

CSS:

.image { overflow: hidden; height: 500px; /* crop size */ width: 500px; }

Collectives™ on Stack Overflow

CSS: Disable image sizing / 'cropping' an image?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related