Question

针对较小屏幕的 CSS 响应式图像

2013-12-06

99

css html

我有两个水平标签图像。我正在移动我的 Web 应用程序以在移动设备上显示它。因此我使用了响应式 Web 设计。我希望两个水平图像以内联方式显示。但是当屏幕宽度减小时，第二幅图像会向下移动。图像在向下移动后会缩小。我希望图像在向下移动之前缩小，并且它不应该向下移动。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 时，图像将一个接一个地流动。

Answer 2

尝试使用媒体查询，它们仅适用于较小的屏幕

 @media only screen and (max-width : 760px) {
     img{
        width: 100%;
     }
 }