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

我正在尝试根据用户的设备调整图像大小。它可以是iPad或台式机。我正在使用引导程序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上，图像是太大了。我不知道如何解决这个问题。请帮忙。非常感谢！

来源

2014-01-16 FlyingCat

添加到您的CSS

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

来源

2014-01-16 22:49:35

我已经尝试过，但没有奏效。问题是iPad上的图像太大，而不是桌面+1 – FlyingCat

使用此中，以最大限度地提高每个设备的图像大小你的CSS样式表：

img { max-width: 100%;}

来源

2014-01-16 22:52:11 datelligence

既然你特别想定位的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/

来源

2014-01-16 22:58:13 Arbel

你所指定的视口？

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

来源

2014-01-16 23:04:21 Aaron

，如果它不能正常工作，您可以删除类。然而，引导程序中的这个类用于为您提供此功能。

第1步：您的图片改成这样

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

步骤2：检查响应，看其作品

步骤3：从图片标签中取出高度&宽度

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

步骤4：将它添加到你的css

img{ 
    width:100%; 
    height:auto; 

}

第5步 - 我们希望它的工作原理

希望这有助于

来源

2014-01-20 00:49:23

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

回答

相关问题