如何利用CSS自动调整图片的大小
2018-11-01 来源：学做网站论坛
经常更换wordpress主题，会有一个困扰，就是之前主题的内容区域宽度比较大，很多正文图片的尺寸可能是500px,而换了一个主题，内容区域的宽度比较小，假设是400px， 这时原先的图片宽度都是500px，这样就会撑大整个容器，造成页面布局混乱。
下面介绍的CSS知识是利用CSS等比例缩小图片，这样就可以完美的显示在你的新主题上了。（如果你不了解CSS，请学习CSS视频教程）
首先找到内容区域的样式，一般是.entry这个类，在style.css中增加以下代码就可以搞定了,方法如下:
.entry img {max-width: 400px}
.entry img {
zoom:expression( function(elm) {
if (elm.width>400) {
var oldVW = elm.width; elm.width=400;
elm.height = elm.height*(400 /oldVW);
}
elm.style.zoom = '1';
}(this));
}
.entry img {
zoom:expression( function(elm) {
if (elm.width>400) {
var oldVW = elm.width; elm.width=400;
elm.height = elm.height*(400 /oldVW);
}
elm.style.zoom = '1';
}(this));
}
根据你的主题内容区域的实际尺寸来设定图片最大宽度，只要小于等于这个宽度即可。将所有出现400px的地方改成你的宽度就好了。
标签： 代码
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
最新资讯
热门推荐