小编Tom*_*itz的帖子

我对响应式图像不熟悉,但已经想出如何使用以下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%;   
  }
}

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