如何让我的图像响应？答案

【问题标题】：How do i get my image to be responsive?如何让我的图像响应？
【发布时间】：2019-02-20 21:52:05
【问题描述】：

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

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

谁能帮助我？

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

【问题讨论】：

【解决方案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%;
}

【讨论】：

【解决方案2】：

max-width: 100% 应该可以解决问题

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

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

【讨论】：

这行得通！我的图像被切成两半，所以当我使用它时，它看起来很奇怪，但仍然正确且反应灵敏。我如何排列它们？
根据您选择的方法，如果您不希望背景图像自行平铺，您可能还需要在背景图像上设置不重复。然后，您可能应该设置一个媒体查询并将您的#full-size-image-wrapper div 的高度调整为更像 215 像素（在较小的屏幕上），而不是桌面版本上的 386 像素。
两张图片都是用css设置的，没有重复。但是有一条白线我无法删除？当我为较小的屏幕设置尺寸时，图像下方会出现一个一直在变化的白框。当你调整窗口大小时，你会明白我的意思

【解决方案3】：

抱歉不能加评论，如果是图片你也可以加height:auto;tomax-width:100%

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

【讨论】：

【解决方案4】：

使用css：

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

或者...

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

【讨论】：