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?
Question
I have a bunch of images that are guaranteed to have:
- minimum width = 200px
- maximum width = 250px
- minimum height = 150px
- maximum height = 175px
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?
6 answers
solution1
2 2010-05-06 05:43:46
将它们包装在具有所需尺寸的容器中并overflow: hidden 。
solution2
1 2010-05-06 07:13:40
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
solution3
1 2010-05-06 14:01:02
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.
solution4
0 2010-05-06 06:08:10
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.
solution5
0 2010-05-06 16:38:39
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.
solution6
0 2011-09-22 09:24:08
只需设置一个min-height:whatever和max-height:whatever和overflow:hidden在块上，然后只是将图像放在块中，就是这样。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.