Question

2014-09-02

102

css image responsive-design

我试图让我的图像具有响应性，这样当它在移动设备上时，图像会缩小，但我无法让它工作。

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

有人能帮助我吗？

这是我的网站：www.promegaekonomi.se（这是我的菜单下的大图像）

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; 并使用媒体查询在网站缩放时更改高度。