避免图像拉伸
[英]Avoid image stretching
问题描述
so I have an image tag on my page that is set to 300px height.
所以我的页面上有一个设置为 300px 高度的图像标签。 When a bigger image is used for it, the image is stretched so it fits and it gets really ugly.当使用更大的图像时，图像会被拉伸以使其适合并且变得非常难看。 Is there a way to just get a part of the image instead, preferably the top 300pxs of it?有没有办法只获取图像的一部分，最好是它的前 300 像素？
Hope I made myself clear, I'm new to this.希望我说清楚了，我是新手。 Thank you!谢谢！
4 个解决方案
解决方案1
4 2014-12-16 22:44:15
I believe我相信
overflow:hidden;
is what you're looking for.就是你要找的。 You put that property on a div that surrounds the image, not the image itself.您将该属性放在围绕图像的 div 上，而不是图像本身。 Here's a good resource: http://css-tricks.com/almanac/properties/o/overflow/这是一个很好的资源： http : //css-tricks.com/almanac/properties/o/overflow/
Here's a code sample:这是一个代码示例：
<html>
<head>
<style>
.overflow{
height:100px;
width:200px;
overflow:hidden;
}
img{
height: 200px;
}
</style>
</head>
<body>
<div class="overflow">
<img src="http://funmozar.com/wp-content/uploads/2014/06/white-cat.jpg">
</div>
</body>
</html>
You could also want to consider using the max-height and max-width properties.您还可以考虑使用 max-height 和 max-width 属性。 Make sure not to set both height AND width on the image or it will still stretch it to match those parameters.确保不要在图像上同时设置高度和宽度，否则它仍然会拉伸以匹配这些参数。
解决方案2
1 2014-12-16 22:51:06
probably the best solution in order to avoid image stretching is to use a div with fixed size (width and height), background-image and use background-size propriety.可能避免图像拉伸的最佳解决方案是使用具有固定大小（宽度和高度）、背景图像和使用背景大小属性的 div。
example:例子：
html: html：
<div id="yourDiv"></div>
css: css：
#yourDiv {
width: 200px;
height: 200px;
background-image: url('yourimage.jpg');
background-size: cover;
}
Please have a look here for other information about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size请在此处查看有关背景大小的其他信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/background-size
解决方案3
0 2014-12-16 23:01:14
You can wrap the image in an element, set fixed dimensions for the container and no dimension settings for the image but overflow: hidden on the image.您可以将图像包装在一个元素中，为容器设置固定尺寸，并且不为图像设置尺寸但overflow: hidden在图像上。 Here's an example of using small dimensions:这是使用小尺寸的示例：
An image:<br> <img src="http://www.lorempixel.com/100/100" alt="foo"><br> The same image with just the upper half taken:<br> <div style="width: 100px; height: 50px; overflow: hidden"><img src="http://www.lorempixel.com/100/100" alt="foo"></div>
解决方案4
0 2021-06-01 13:01:59
A possibility is to use the object-fit CSS property on the image.一种可能性是在图像上使用object-fit CSS 属性。 For instance, the value contain will scale down the image so that its original ratio is maintained;例如，值contain将缩小图像以保持其原始比例； while the value cover will crop parts of the image.而 value cover将裁剪图像的一部分。 You can then use the object-position property to properly place the scaled down or the croped image.然后，您可以使用object-position属性正确放置缩小或裁剪的图像。
For more information on these CSS properties and their differents values:有关这些 CSS 属性及其不同值的更多信息：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.