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

Question

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

大屏幕：

手机屏幕：

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

所以，我添加了这个：

img {
  min-height: 300px;
}

当然，这不是办法。

如何解决这个问题？

代码演示

标签： htmlcssbootstrap-4responsive-images

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>