CODEWITHSUNDEEP
javascripthtmlcss
NickNick
NickNick

Reputation: 81

JavaScript/HTML: How do I display an IMG with a set dimension and if the image is wider or taller than that dimension, to crop/hide the overflow?

I have a bunch of images that are guaranteed to have:

What I want to do is display a consist 200px by 150px rectangle of the image while maintaining scale (no stretching or shrinking).

Which means, I might have some overflow.

How can I display the image so that it keeps porpotions to the original image size, yet displayed inside a 200x150 px window and hiding any overflow?

Upvotes: 3

Views: 372

Answers (6)

android.nick
android.nick

Reputation: 11215

Just set a min-height:whatever and max-height:whatever and overflow:hidden on the blocks, then just place the images in the block, and that's it.

Upvotes: 0

Ben Hull
Ben Hull

Reputation: 7673

In theory, this is exactly what the clip property of CSS is for - but there's one, sometimes really painful, side effect to using it, though - the image needs to be absolutely positioned:

<html>
  <head>
    <style type="text/css">
    .thumbnail {
      width:200px;
      height:150px;
    }
    .thumbnail img {
      position:absolute;
      clip:rect(0, 200px, 150px, 0);
    }
    </style>
  </head>
  <body>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
  </body>
</html>

The fact that this takes the images out of document flow is pretty nasty - the best you can do is put them inside a frame of the right dimensions (which means you may as well just use the overflow mask methods other people have suggested). Clip is a useful property in the right places, and a lot of people don't seem to know about it.

Upvotes: 0

Jedidiah
Jedidiah

Reputation: 1194

I made a quick demo (online here) of a way of solving it similar to nahum's second example. There are 3 images within the range of sizes you set. It doesn't resize or stretch the images and they will follow the alignment of the surrounding text.

Hope it helps,

Jedidiah

  <span class="thumbnail" style="background-image:url(200_150.jpg);"></span>
  <span class="thumbnail" style="background-image:url(220_160.jpg);"></span>
  <span class="thumbnail" style="background-image:url(250_175.jpg);"></span>


  span.thumbnail{
    display:block; display:inline-block;
    width:200px; height:150px;
    background-position: center center;
    background-repeat: no-repeat;
  }
  • Use a span rather than a div because IE6+7 will only let you set display:inline-block on an element that is naturally inline.
  • The first display:block is a fallback for Firefox 2 which doesn't support inline-block.

Upvotes: 1

ncubica
ncubica

Reputation: 8495

This trick is quite cool and doesnt matter the image size ok look... you can do something like this

<div style="width:Npx; height:Npx; overflow:hidden">
  <img src="source.png" style="width:Npx;">
</div>

so how this work, the div will hold the imagen in a rectangle Xpx by Ypx you defined and will "crop" everything that its outside. Then you use the resize who have every browser you can assign a With a imagen and the browser will resize it for you. So if you put the same width that the div holder you will give the impresion that the image fit in that rectangle. This is the best option I can find without use server side code.

the next example is:

you can define again a rectangle and then assign a background, the big problem is the the imagen WILL not resize to fit the area.

<div style="width:Npx; height:Npx; background:url(yourimage.png) center"></div>

hope to help you... best

Upvotes: 1

AllenJB
AllenJB

Reputation: 1254

If you're images are particularly large, or there are going to be lots of them (for example, a thumbnail browser). You may want to consider creating a pre-cropped copy of them image. This can be done using gd or imagemagick [0] - you can also find a number of wrapper libraries around these extensions that may make the task easier.

[0] http://php.net/manual/en/refs.utilspec.image.php

Upvotes: 0

Quentin
Quentin

Reputation: 944200

Wrap them in a container with the dimensions you want and overflow: hidden.

Upvotes: 2

Related Questions