Question

我有以下代码：

w = w + a * err * Z[i, :].T

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

Answer 1

.image-container {
overflow:hidden;
height: 350px;
width: 450px;
display:block;
}
img {
height: 400px;
width: 800px;
}

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

尝试使用容器

上的overflow:hidden代码

Answer 2

如果您想简单地以较小的宽度剪切部分图像，可以在父级上设置 overflow: hidden ，同时指定 {{3}父母的和 height ：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

在许多情况下，能够指定width: 100%可以简化调整大小的操作。

保持图像高度并在比其容器宽时隐藏其溢出部分

3 个答案: