CSS 随着屏幕尺寸的调整，响应式图像不会随 Firefox 一起缩放。适用于其他浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14718033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive Images won't Scale with Firefox as screen size is adjusted. Works in other Browsers
提问by Tom Stermitz
I'm new to responsive images but have figured out how to get my images to scale in Safari, Opera, and Chrome (don't know about IE) with the following CSS:
我是响应式图像的新手，但已经想出了如何使用以下 CSS 在 Safari、Opera 和 Chrome（不了解 IE）中缩放我的图像：
img {
max-width: 100%;
width: auto;
height: auto;
}
As the screen size is changed, the image scales. In Firefox, the image doesn't scale, unless I change width:auto to width:100%; Then Safari scrunches up the image to nothing upon load or reload; although, clearing cash makes it full size. I'm working on Drupal with the Zen 7.5-dev responsive theme. And I'm keeping my css files in SASS, but this is probably just a CSS issue. Maybe I've missed something on the HTML 5 or CSS3 side of things.
随着屏幕尺寸的变化，图像会缩放。在 Firefox 中，图像不会缩放，除非我将 width:auto 更改为 width:100%；然后 Safari 在加载或重新加载时将图像压缩为空；尽管如此，清算现金使它成为全尺寸。我正在使用 Zen 7.5-dev 响应主题开发 Drupal。我将我的 css 文件保存在 SASS 中，但这可能只是一个 CSS 问题。也许我错过了 HTML 5 或 CSS3 方面的一些东西。
Anyway, I got things to work by overriding the image width a Firefox specific directive like this:
无论如何，我通过像这样覆盖 Firefox 特定指令的图像宽度来工作：
/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
@-moz-document url-prefix() {
img {
width: 100%;
}
}
I don't think I should have to do this, and googling doesn't seem to come across this issue.
我不认为我应该这样做，谷歌搜索似乎没有遇到这个问题。
回答by Milingu Kilu
This is the default CSS that is used for responsive Images:
这是用于响应式图像的默认 CSS：
img {
max-width: 100%;
height: auto;
width:100%;
}
And this is the indispensable Javascript: Bongard.net
这是不可或缺的 Javascript：Bongard.net
Thanks to David Bongard for the Javascript.
感谢 David Bongard 的 Javascript。
Now add the following to the "if safari" rule of the Script:
现在将以下内容添加到脚本的“if safari”规则中：
for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
document.getElementsByTagName("img")[i].style.width = "auto";
}
Safari wants width:auto;the rest of the browsers i tested are happy with width:100%;
Safari 希望width:auto;我测试过的其他浏览器都满意width:100%;
回答by dmitriy.g
This works for me
这对我有用
@-moz-document url-prefix() {
img{
width: 100%;
max-width: 100%;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
img{
max-width: 100%;
}
}
回答by Kridsada Thanabulpong
I have similar problem, and found out setting max-widthon the wrapper element kinda solves the issue. (Only tested with Firefox 23, but it should works with earlier Firefox too.) See also these JSFiddle:
我有类似的问题，发现max-width包装元素上的设置有点解决了这个问题。（仅在 Firefox 23 上测试过，但它也适用于早期的 Firefox。）另见这些 JSFiddle：
- http://jsfiddle.net/CLUGX/(demonstrate the issue on Firefox)
- http://jsfiddle.net/CLUGX/1/(uses
max-widthon wrapper to fix the issue) - http://jsfiddle.net/CLUGX/4/(demonstrate that responsive sizing works, try resizing inner frame)
- http://jsfiddle.net/CLUGX/（在 Firefox 上演示该问题）
- http://jsfiddle.net/CLUGX/1/（用于
max-width包装器来解决问题） - http://jsfiddle.net/CLUGX/4/（证明响应式大小调整有效，尝试调整内部框架的大小）
Before max-width:
在最大宽度之前：
After max-width:
最大宽度后：
One thing to note, however, if you happens to set paddingon wrapper element, it won't be taken into img's width calculation and will cause inconsistent results between Firefox and Safari (http://jsfiddle.net/CLUGX/3/):
但是需要注意的一件事是，如果您碰巧padding在包装器元素上设置，它不会被计入img的宽度计算中，并且会导致 Firefox 和 Safari 之间的结果不一致（http://jsfiddle.net/CLUGX/3/） ：
回答by Boris Zbarsky
Chances are your image is inside a shrink-wrapping container, which then has to compute it's width based on the width of the image. And then the max-width of the image is 100% of the container's width.
您的图像可能位于收缩包装容器内，然后必须根据图像的宽度计算其宽度。然后图像的最大宽度是容器宽度的 100%。
If that's what's going on, the CSS spec doesn't actually define the behavior of such markup, where the parent's width depends on the child and the child's width depends on the parent.
如果是这样的话，CSS 规范实际上并没有定义这种标记的行为，其中父级的宽度取决于子级，子级的宽度取决于父级。
See https://bugzilla.mozilla.org/show_bug.cgi?id=823483for some discussion on the issue.
有关该问题的一些讨论，请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=823483。
回答by Thilak Raj
If you use the width for image in px or gave padding or used display:table instead of display:block for the image, then image responsiveness will not work properly on some/all browsers
如果您使用 px 中的图像宽度或提供填充或使用 display:table 而不是 display:block 作为图像，则图像响应将无法在某些/所有浏览器上正常工作
回答by Max Sequeira
Well after trying all sorts of codes and fidles, this simple edition on my css did the trick for me:
在尝试了各种代码和小提琴之后，我的 css 上的这个简单版本对我有用：
img {width: 100%;}
Simply then where you wish your images to resize, define them without adding the "width" parameter (sizing to original from source); and then if you do wish to fix their size, simply add the "width" parameter on SRC style (regular width="" definition won't work). If it's an inline image on your paragraph, simply wrap it in a div and align that div to whatever side you'd like. Reeeeally simple!
只需在您希望图像调整大小的地方，定义它们而不添加“宽度”参数（从源调整到原始大小）；然后，如果您确实希望修复它们的大小，只需在 SRC 样式上添加“宽度”参数（常规 width="" 定义不起作用）。如果它是您段落中的内嵌图像，只需将其包装在一个 div 中并将该 div 与您想要的任何一侧对齐。非常简单！
It works both for Google, Firefox and IE. Cheers!
它适用于 Google、Firefox 和 IE。干杯!
回答by FurryCritter
I have just had this problem and found a solution: When I set the img max-width in my CSS sheet, nothing happens - the image won't scale. When I set max-width in the page itself - where the image is called, it works in all browsers and on all devices.
我刚刚遇到了这个问题并找到了一个解决方案：当我在 CSS 表中设置 img max-width 时，没有任何反应 - 图像不会缩放。当我在页面本身中设置 max-width - 调用图像的位置时，它适用于所有浏览器和所有设备。
No:
不：
img {
max-width: 100%;
height: auto; }
Yes:
是的：
<img src ="image.jpg" style="max-width:100%; height:auto;">
If anyone can shed some light of wisdom on this, please do.
如果有人可以对此有所启发，请这样做。
回答by Aaron Surrain
I used Kridsada Thanabulpong's jsfiddle but only got it to work when I removed display:table from the div wrapping my image.
我使用了 Kridsada Thanabulpong 的 jsfiddle，但只有当我从包装我的图像的 div 中删除 display:table 时才让它工作。
