6

我是响应式图像的新手，但已经想出了如何使用以下 CSS 让我的图像在 Safari、Opera 和 Chrome（不了解 IE）中缩放：

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

随着屏幕尺寸的改变，图像会缩放。在 Firefox 中，图像不会缩放，除非我将 width:auto 更改为 width:100%; 然后 Safari 在加载或重新加载时将图像压缩为空；虽然，清算现金使其全尺寸。我正在使用 Zen 7.5-dev 响应主题开发 Drupal。我将我的 css 文件保存在 SASS 中，但这可能只是一个 CSS 问题。也许我错过了 HTML 5 或 CSS3 方面的一些东西。

无论如何，我通过覆盖 Firefox 特定指令的图像宽度来完成工作，如下所示：

/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
@-moz-document url-prefix() {  
  img {   
    width: 100%;   
  }
}

我认为我不应该这样做，而且谷歌搜索似乎没有遇到这个问题。

4

8 回答 8

9

这是用于响应式图像的默认 CSS：

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

这是必不可少的 Javascript：Bongard.net

感谢 David Bongard 的 Javascript。

现在将以下内容添加到脚本的“if safari”规则中：

for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
  document.getElementsByTagName("img")[i].style.width = "auto";
  }

Safari 希望width:auto;我测试的其他浏览器都满意width:100%;

于 2013-06-13T16:03:40.143 回答
7

这对我有用

@-moz-document url-prefix() {  
    img{
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {    
     img{
        max-width: 100%;
    }    
}
于 2014-03-27T16:10:52.543 回答
5

我有类似的问题，发现max-width包装元素上的设置有点解决了这个问题。（仅在 Firefox 23 上测试过，但它也应该适用于早期的 Firefox。）另见这些 JSFiddle：

在最大宽度之前：

在最大宽度之前

最大宽度后：

在最大宽度之后

但是，需要注意的一件事是，如果您碰巧padding在 wrapper 元素上进行了设置，它不会被纳入img的宽度计算中，并且会导致 Firefox 和 Safari 之间的结果不一致（http://jsfiddle.net/CLUGX/3/） ：

啊啊啊

于 2013-05-21T14:59:11.430 回答
2

您的图像可能位于收缩包装容器内，然后必须根据图像的宽度计算其宽度。然后图像的最大宽度为容器宽度的 100%。

如果是这样的话，CSS 规范实际上并没有定义这种标记的行为，其中父级的宽度取决于子级，而子级的宽度取决于父级。

有关该问题的一些讨论，请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=823483 。

于 2013-02-06T11:18:02.910 回答
1

如果您使用 px 中的图像宽度或使用填充或使用 display:table 而不是 display:block 图像，则图像响应在某些/所有浏览器上将无法正常工作

于 2015-04-14T07:20:49.190 回答
1

好吧，在尝试了各种代码和小提琴之后，我的 css 上的这个简单版本对我有用：

img {width: 100%;}

只需在您希望图像调整大小的位置，在不添加“宽度”参数的情况下定义它们（从源调整为原始大小）；然后如果您确实希望修复它们的大小，只需在 SRC 样式上添加“宽度”参数（常规宽度 =“”定义将不起作用）。如果它是段落中的内联图像，只需将其包装在一个 div 中并将该 div 对齐到您想要的任何一侧。非常简单！

它适用于 Google、Firefox 和 IE。干杯!

于 2015-04-24T07:28:24.683 回答
0

我刚刚遇到这个问题并找到了解决方案：当我在 CSS 表中设置 img max-width 时，什么也没有发生 - 图像不会缩放。当我在页面本身中设置最大宽度时 - 调用图像的位置，它适用于所有浏览器和所有设备。

不： 

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

是的：

<img src ="image.jpg" style="max-width:100%; height:auto;">

如果有人可以对此有所启发，请这样做。

于 2014-07-30T20:21:02.813 回答
0

我使用了 Kridsada Thanabulpong 的 jsfiddle，但只有当我从包装我的图像的 div 中删除 display:table 时，它​​才能工作。

于 2014-09-10T22:50:49.630 回答