Question

我有两个horrizontal标签图像。我正在移动我的Web应用程序以在移动设备中显示它。所以我使用了响应式网页设计。我想要两个horrizntal图像显示内联。但是当屏幕宽度减小时，第二个图像向下移动。向下移动后图像缩小。我希望图像在向下移动之前收缩，它不应该向下移动.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 queries，它们只适用于较小的屏幕

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

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

2 个答案: