Question

所以我的页面上有一个图像标签，设置为300px高度。当使用更大的图像时，图像会被拉伸，因此它会变得非常难看。有没有办法只获取图像的一部分，最好是它的前300pxs？

希望我明确表示自己，我是新手。谢谢！

Answer 1

我相信

overflow:hidden;

是您正在寻找的。您将该属性放在围绕图像的div上，而不是图像本身。这是一个很好的资源：http://css-tricks.com/almanac/properties/o/overflow/

以下是代码示例：

<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>

您还可以考虑使用max-height和max-width属性。确保不要在图像上设置高度和宽度，否则它仍会拉伸它以匹配这些参数。

Answer 2

为了避免图像拉伸，最好的解决方案是使用固定大小（宽度和高度）的div，背景图像并使用背景大小的适当性。

示例：

HTML：

<div id="yourDiv"></div>

的CSS：

#yourDiv { width: 200px; height: 200px; background-image: url('yourimage.jpg'); background-size: cover; }

有关背景大小的其他信息，请查看此处：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 3

您可以将图像包装在一个元素中，为容器设置固定尺寸，而不为图像设置尺寸设置，但在图像上设置overflow: hidden。以下是使用小尺寸的示例：

＆＃13;

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>

＆＃13;

Answer 4

一种可能性是在图像上使用 object-fit CSS 属性。例如，值 contain 将缩小图像以保持其原始比例；而值 cover 将裁剪图像的一部分。然后，您可以使用 object-position 属性正确放置缩小或裁剪的图像。

有关这些 CSS 属性及其不同值的更多信息：

避免图像拉伸

4 个答案: