Question

我为一个正在处理的小项目（JSFiddle：https://jsfiddle.net/y5o1343j/2/）制作了一个登陆页面，我想知道当浏览器窗口有一定宽度时如何使图像显得更小并且排成一行（特别是在移动设备上）。

这是我的HTML：

<h1 class="main-title">

    <img id="1" src="img/2-login.png" 
        height="200px" width="150px">

    <img id="2" src="img/logo.png">

    <img id="3" src="img/3-register.png"  
        height="200px" width="150px">

</h1>

例如：如果在移动设备上观看，图像应该与屏幕的宽度/高度成比例，并且垂直对齐，如下所示：

[！[在此处输入图像说明] [1]] [1]

当我在移动浏览器中查看我的页面时，主徽标图像看起来与屏幕的其余部分成比例太大。

当我重新缩放它时，这仅适用于我的桌面浏览器窗口。

然而，当我调整浏览器屏幕大小时，会发生这种情况： [！[在此处输入图像说明] [2]] [2]

当屏幕尺寸达到一定宽度时，如何防止中心图像与第一张图像位于同一行？

编辑：

我添加的CSS规则：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
      #1,#2,#3{
          display:block;
          width:100%;
  }

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

      #1,#2,#3{
          display:block;
          width:100%;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

      #1,#2,#3{
          display:block;
          width:100%;
  }

}

Answer 1

您应该使用媒体查询：

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
      #1,#2,#3{
          display:block;
          width:100%;
  }
}

我写的媒体查询来自iPhone 5的纵向方向。实现目标的想法是在拥有display:block时将内容框设置为width:100%。不要添加任何height，否则您的图片上可能会出现奇怪的比例。

使图像与屏幕尺寸和垂直线成比例？

1 个答案: