随着屏幕尺寸的调整,响应式图像无法与Firefox一起扩展.适用于其他浏览器

Question

我对响应式图像不熟悉,但已经想出如何使用以下CSS在Safari,Opera和Chrome(不知道IE)中扩展我的图像:

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

随着屏幕尺寸的改变,图像会缩放.在Firefox中,图像不会缩放,除非我改变宽度:auto to 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%;   
  }
}

我不认为我应该这样做,谷歌搜索似乎没有遇到这个问题.

Answer 1

这是用于响应图像的默认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%;

Answer 2

这适合我

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

@media screen and (-webkit-min-device-pixel-ratio:0) {    
     img{
        max-width: 100%;
    }    
}

Answer 3

我有类似的问题,max-width并发现在包装元素上的设置有点解决问题.(仅使用Firefox 23测试过,但它也适用于早期的Firefox.)另见这些JSFiddle:

• http://jsfiddle.net/CLUGX/(在Firefox上演示问题)
• http://jsfiddle.net/CLUGX/1/(用于max-width包装器修复问题)
• http://jsfiddle.net/CLUGX/4/(演示响应式大小调整工作,尝试调整内部框架的大小)

在最大宽度之前:

最大宽度后:

但有一点需要注意的是,如果碰巧设置padding了包装元素,它将不会进入img宽度计算,并且会导致Firefox和Safari之间出现不一致的结果(http://jsfiddle.net/CLUGX/3/) :

Answer 4

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

如果发生这种情况，CSS 规范实际上并没有定义此类标记的行为，其中父级的宽度取决于子级，而子级的宽度取决于父级。

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