html - 如何在我的案例中创建响应式图像？

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;
}