我对响应式图像不熟悉,但已经想出如何使用以下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%;
}
}
我不认为我应该这样做,谷歌搜索似乎没有遇到这个问题.
解决方法
这是用于响应图像的默认CSS：
img {
max-width: 100%;
height: auto;
width:100%;
}
这是必不可少的Javascript：Bongard.net
感谢David Bongard的Javascript.
for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
document.getElementsByTagName("img")[i].style.width = "auto";
}
Safari想要宽度：自动;我测试的其他浏览器都满意宽度：100％;
