Html 在我的案例中，如何创建响应性图像？

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

我有如下的一些东西

<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中

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

---

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

 img { max-width: 100%;}

---

由于您特别希望以iPad为目标，因此可以根据iPad的屏幕大小使用媒体查询。（这是用于非视网膜显示器）

@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）{
img.img-responsive{
显示：内联块；
最大宽度：100%；/*是否指定了视口

如果该类不起作用，则可以删除该类。但是，引导中的该类用于提供此功能

步骤1：将图像更改为此

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

第五步-希望它能起作用

希望这有帮助
我试过了，但没用。问题是ipad上的图像太大，而不是桌面+1
@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 */
    }

}

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

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

img{
   width:100%;
   height:auto;

}