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

Question

我们如何使用 html 和 css(jquery 解决方案也可以)在较小的父 div(小于图像大小)中包含图像。图像不应调整大小或裁剪，图像的可见性应限制为父 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>