如何让我的图像响应？

Question

我试图让我的图像响应，以便当它在移动设备上的图像缩小但我无法让它工作。

我尝试过使用100％的高度和宽度。

任何人都可以帮助我吗？

这是我的网站：www.promegaekonomi.se（它的bbig图像在我的经纪下）

Answer 1

如果您使用的是Bootstrap 3.0，则只能添加class="img-responsive"

这样的事情：

<img  class="img-responsive" src="img/sponsor/nescafe.png" alt="nescafe">

否则：

<img  class="responsive-photo" src="img/sponsor/nescafe.png" alt="nescafe">

CSS：

.responsive-photo{
    height: auto;
    max-width: 100%;
}

Answer 2

max-width: 100%应该做的伎俩

如果你的图片是用css（而不是<img>标签），你可以尝试：

background-size: cover或background-size: 100% auto

Answer 3

抱歉，无法添加评论，如果是图片，您可能还想将height:auto;添加到max-width:100%

编辑 - 查看您的网站，如果您所指的背景图片跨越整个宽度，您可以添加background-size:cover;并在网站缩放时使用媒体查询更改高度。

Answer 4

使用css：

    img{height:auto; width:100%;}

... OR

您可以将图像转换为SVG文件，它会自动调整其大小......