CSS Display an Image Resized and Cropped

Answer 1

You can put the img tag in a div tag and do both, but I would recommend against scaling images in the browser. It does a lousy job most of the time because browsers have very simplistic scaling algorithms. Better to do your scaling in Photoshop or ImageMagick first, then serve it up to the client nice and pretty.

Answer 2

You could use a combination of both methods eg.

<div class="crop">
    <img src="..." alt="..." />
</div>

CSS:

.crop { width: 200px; height: 150px; overflow: hidden; }
.crop img { width: 400px; height: 300px; margin: -75px 0 0 -100px; }

You can use negative margin to move the image around within the div.

Answer 3

<style>
  .imgContainer{
  overflow:hidden;
  width:200px;
  height: 100px;
  }
  .imgContainer img{
  width:200px;
  hieght:120px;
  }
</style>

<div class="imgContainer">
     <img src="imageSrc" />
</div>

The containing div with essentially crop the image by hiding the overflow.

Answer 4

What I've done is to create a server side script that will resize and crop a picture on the server end so it'll send less data across the interweb.

It's fairly trivial, but if anyone is interested, I can dig up and post the code (asp.net)

Answer 5

Rob, I know it is a bit old thread, but maybe You could help me... if You have that code any more... i'd be grateful for it :) Can You write it down, or sent me on my e-mail address (drartoor[at]o2.pl)

Thanks in advance

Sorry for my English - it's not my native language :)