所以我的页面上有一个设置为 300px 高度的图像标签。当使用更大的图像时，图像被拉伸以适合它，它变得非常丑陋。有没有办法只获取图像的一部分，最好是它的前 300 像素？
希望我说清楚，我是新手。谢谢！
我相信
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>
您还可以考虑使用最大高度和最大宽度属性。确保不要在图像上同时设置高度和宽度，否则它仍然会拉伸它以匹配这些参数。
一种可能性是在图像上使用 object-fit CSS 属性。例如，值contain将缩小图像，以保持其原始比例;而值cover将裁剪图像的一部分。然后，可以使用 object-position 属性正确放置缩小或裁剪的图像。
有关这些 CSS 属性及其不同值的详细信息：
- https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
- https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
为了避免图像拉伸，最好的解决方案可能是使用具有固定大小(宽度和高度(的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
您可以将图像包装在元素中，为容器设置固定尺寸，并且没有图像的尺寸设置，但overflow: hidden图像。下面是使用小尺寸的示例：
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>我刚刚添加了这个 CSS 代码，它运行良好。以上都不适用于我的情况，因为我的图像尺寸不同。但是，这非常有帮助，并引导我找到了解决方案。
img { max-width: cover; height: auto; }