如何在不破坏移动屏幕比例的情况下将最小高度添加到 html 响应图像

Question

我正在尝试插入全角主图。问题是基于图像的原始高度，它在移动设备上变得太短了。

大屏幕：

手机屏幕：

基本上，我想要的高度比移动屏幕上的计算高度大一点。所以，我认为如果我对图像应用最小高度会很好。

所以，我添加了这个：

img {
  min-height: 300px;
}

当然不是这样。

如何解决这个问题？

Answer 1

您需要将 img 块包裹在父块中。然后在父块中设置最小高度，并在 img 块中指定宽度为 100%。这将保留图像的纵横比，其高度将大于或等于父级，但不小于父级块中设置的高度。当然，父块必须从其父块继承整个屏幕宽度或显式具有 100% 的宽度。例如：

.block__image {
    /*width: 100%;*/
    min-height: 300px;
}

.block__image img {
    width: 100%;
}

<div class="block__image">
  <img src="https://i.stack.imgur.com/U1tXC.jpg" alt="image error">
</div>

How to add min height to html responsive image without breaking ratio for mobile screen