css - 保持图像高度，当它比容器宽时隐藏它的溢出部分

Question

我有以下代码:

<div class="image-container">
   <img src="myimage.jpg">
</div>

img {
    height: 400px;
}

图像的大小为 800 像素 X 400 像素。在桌面上，图像可以完整显示。当我减小浏览器宽度并使视口(viewport)的宽度小于 800px 时，图像的高度会保持不变，但它会被水平压缩，从而导致图像失真。如何向图像或其容器添加 CSS 以隐藏其溢出部分，以便我可以看到裁剪后的图像而不会失真？希望图像始终在容器中居中。

Answer 1

如果你想简单地以较小的宽度剪掉一些图像，你可以设置一个 overflow: hidden 在父级上，同时指定 height 和 width 对于 parent :

.image-container {
  max-width: 300px;
  max-height: 200px;
  overflow: hidden;
}

.image-container > img {
  width: 800px;
  height: 400px;
}

<div class="image-container">
  <img src="https://placekitten.com/g/800/400">
</div>

但是，我建议缩放图像(保持其纵横比)，以便它可以完全包含在容器/视口(viewport)中。这可以通过在图像上设置 100% 的 width 而不指定高度来实现:

.image-container {
  max-width: 300px;
}

.image-container > img {
  width: 100%;
}

<div class="image-container">
  <img src="https://placekitten.com/g/800/400">
</div>