保持图片大小固定

Question

我有一个img，我想不要越过下面的部分。当我将视口拖出并使窗口变大时，它只会越过。

我想限制图像移动。

这可能并不能很好地解释我的问题所以我附上了两张图片来解释：

小窗口：

更大的窗口：

第一个图像（较小的窗口）是我想要的图像，但是当较大的窗口显示一旦窗口变大，它会随着页面响应而向下移动并越过参考部分。我希望能阻止它这样做吗？

一般图片CSS：

img {
display: block;
margin: auto;
height: auto;
margin: auto;
max-width: 80%;
padding-bottom: 1em;

}

.bassportrait CSS：

 .bassport {
float: right;
   overflow: hidden;
   padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
height: 20%;
width: 20%;

}

希望这是有道理的，我已经向您展示了相关代码 - 我是初学者！

Answer 1

由于您的.bassport向右浮动，因此需要在下面的元素上清除该浮动以防止重叠。有很多方法可以做到这一点，但最常见的是在其父元素中添加一个clearfix。

.parent-element:after {
  content: "";
  display: table;
  clear: both;
}

名义标记

<div class="parent-element"><!-- Clearfix applies to this element -->
  <p>Ulrika's work...</p>
  <p>Bass died...</p>
  <img class="bassport" src="..."><!-- Floated element that needs to be cleared -->
</div>

或者，如果您正在使用具有clearfix实用程序类的框架，则可以将该类添加到父div，它将具有相同的效果。

参考：https://css-tricks.com/snippets/css/clear-fix/