css - 具有 CSS 的响应式图像适用于较小的屏幕

Question

我有两个水平标签图像。我正在移动我的网络应用程序以在移动设备上显示它。所以我使用了响应式网页设计。我希望两个水平图像内联显示。但是当屏幕宽度减小时，第二个图像向下移动。图像向下移动后缩小。我希望图像在向下移动之前缩小并且不应该向下移动。下面给出了 CSS 和 HTML。请帮忙。

.image-wrapper {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

<figure>
    <img class="image-wrapper" src="~/Images/Q.gif" />
    <img class="image-wrapper" src="~/Images/H.gif" />
    </figure>

Answer 1

您可以使用媒体查询来实现。尝试这样的事情:

@media (max-width : 320px) {

  .image-wrapper {
    width: 100%;
    height: auto;
    display: block;
  }
}
@media (min-width : 320px) {
  .image-wrapper {
    width: 50%;
    height: auto;
    display: inline-block;
  }
}

从代码中可以看出，当可用宽度小于 480px 时，图像将在另一张下方流动超过临界点。