图片的css自适应

当需要css来缩放图片的时候,可以采用外层容器100%或者任意百分比,

内层图片img tag 没有宽高,用sass写经过断点后的mixin中的样式就是这样:

.workscon_section{ width: 100%;
    .left_art{ 
         width: 100%; display: block; float: left; text-align: center;
         img{ border: 0 none; height: auto; max-width: 92%; margin: 1px 0; 
        }
     }
 }     

如果断点的宽度比图片的最大尺寸还大的话,会出现不能居中。

比如手机的horizontal portrait 就会很难看。

这种时候css可能没法办到,还是需要js来控制外层容器的宽度,然后margin:0 auto;

_workscon_section = ($(window).width()-50)>600?600:($(window).width()-50);        

比如图片最宽是600px,小于600的时候用窗口宽度来计算。

在超过600的时候,就应该还是600,否则就不会居中了。

图片的css自适应,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。