Css 如何使我的形象具有响应性？

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

我试过100%使用高度和宽度

有人能帮我吗

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

最大宽度：100%应该可以

如果您的图像是使用css而不是在标记中应用的，您可以尝试：

---

背景尺寸：封面或背景尺寸：100%自动

抱歉，无法添加评论，如果是图像，您可能还需要添加高度：自动；最大宽度：100%

编辑-看你的网站，如果它的背景图像，你是指跨越整个宽度，你可以添加背景大小：封面；并在站点缩放时使用媒体查询更改高度。

使用css：

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

或者

---

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

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

大概是这样的：

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

---

尝试只设置高度或宽度，而不是将两者都设置为100%。这可能会重复！我的图像被一分为二，所以当我使用它时，它看起来很奇怪，但仍然正确且反应灵敏。如何排列它们？根据您选择的方法，如果不希望背景图像平铺，您可能还希望在背景图像上设置“不重复”。然后，您可能应该设置一个媒体查询，并将全尺寸图像包装div的高度调整为更小屏幕上的215px，而不是桌面版本上的386px。这两个图像都在css中设置，不会重复。但是有一条白线我无法消除？当我为较小的屏幕设置尺寸时，图像下方有一个白色框，该框一直在变化。当你重新打开窗户，你就会明白我的意思

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

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