Question

我正在尝试根据用户的设备调整图像大小。它可能是iPad或台式机。我正在使用bootstrap 3并尝试实现它。

我有以下内容。

<a href='#' id='btn1' ><img class='img-responsive' src='image1.png'/></a>
<a href='#' id='btn2' ><img class='img-responsive' src='image2.png'/></a>
<a href='#' id='btn3' ><img class='img-responsive' src='image3.png'/></a>
<a href='#' id='btn4' ><img class='img-responsive' src='image4.png'/></a>

我希望图片在桌面上显示实际尺寸，但在iPad上显示小尺寸。我还需要让这些底部保持在屏幕的边缘（右上和下），我使用绝对位置。

我的css是

#btn1{
    position: fixed;
    top: 35%;
    left: 0;
    z-index: 10;
}
#btn2{
    position: fixed;
    top: 0%;
    left: 60%;
    z-index: 10;
}
#btn3{
    position: fixed;
    top: 30%;
    right: 0;
    z-index: 10;
}
#btn4{
    position: fixed;
    bottom: 0;
    left: 70%;
    z-index: 10;
}

我的问题是当我在iPad上打开我的应用程序时，图像太大了。我不知道如何解决这个问题。请帮忙。非常感谢！

Answer 1

将此添加到您的CSS

img{
max-width: 100%;
height: auto;
display: block;
}

Answer 2

在css样式表中使用此功能，以便最大化每个设备中的图像大小：

 img { max-width: 100%;}

Answer 3

由于您特别想要定位iPad，因此您可以根据iPad的屏幕尺寸使用媒体查询。（这是用于非视网膜显示器）

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  { 

    img.img-responsive {
    display: inline-block;
    max-width: 100%; /* <- Adjust accordingly based on your actual layout */
    }

}

您可以对视网膜显示或任何其他显示尺寸应用相同的概念。

iPad显示分辨率的来源：http://www.apple.com/ipad/compare/

Answer 4

您是否指定了视口？

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 5

如果该类不起作用，您可以将其删除。但是，引导程序中的该类用于为您提供此功能。

第1步：将图像更改为

<a href='#' id='btn1' ><img height="auto" width="100%" src='image1.png'/></a>

第2步：检查是否有效查看其作品

第3步：移除身高＆amp;图像标签的宽度

 <a href='#' id='btn1' ><img src='image1.png'/></a>

第4步：将其添加到您的CSS

img{
   width:100%;
   height:auto;

}

第5步 - 希望它有效

希望这有帮助

如何在我的情况下创建响应式图像？

5 个答案: