css – 调整屏幕大小时,响应式图像不会随Firefox扩展.适用于其他浏览器

前端之家收集整理的这篇文章主要介绍了css – 调整屏幕大小时,响应式图像不会随Firefox扩展.适用于其他浏览器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我对响应式图像不熟悉,但已经想出如何使用以下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.

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

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

Safari想要宽度:自动;我测试的其他浏览器都满意宽度:100%;

猜你在找的CSS相关文章