在不调整图像大小的情况下，在较小的父div中包含图像

Question

我们如何使用html和css在较小的父div（小于图像的大小）中包含图像（jquery解决方案也可以）。图像不应调整大小或裁剪，图像的可见性应限制为父div的可见性。图像可能本身在div2内（不一定）。

如图所示，图像大于div1的图像，图像的可见性仅限于父div（div1）。无论图像的大小如何，另一个div（div3）都位于div1的正下方。

是否有任何关于图像焦点的问题显示在

中

background-position: bottom;

注意：在给定的图像中，花盆的底部部分仅用于说明目的，实际上该部分将隐藏在div1之外。

Answer 1

在图像周围创建一个div容器，将其设置为高度，并使其隐藏溢出：

.image-container {
overflow: hidden;
height: 250px;
border: 1px solid red;
}

img {
width: 100%;
}

<div class="image-container">
<img src="https://c1.staticflickr.com/4/3939/15487040296_90539d40f9_b.jpg">
</div>

Answer 2

据我所知，当背景图像超出元素边界时会自动被裁剪。

因此，您可以将图片设置为background-image的{​​{1}}。如果您的图片太大而超出div并被裁剪，则可以使用div属性，它有两个非常有用的值：background-size和contain

cover

使用div { background-image: url("path/to/image.jpg"); background-size: contain; /* or cover */ } ，背景图片将调整大小，直到它完全包含在background-size: contain中。另一方面，div会确保您的background-size: cover完全被图片覆盖。

我希望我能正确理解你的问题。