张文保的博客
张文保 · Paul Zhang

Engineering the Future
功不唐捐,玉汝于成

等比缩放 图片缩放
纯CSS控制文章内容图片等比缩放

纯CSS控制文章内容图片等比缩放

很多CMS模板,发布内容上传图片后,图片宽度超过正文主体内容宽度时,需要设置等比例缩放。下面用纯CSS来控制图片比例,效果非常不错,以下CSS设置的最大宽度是800px,超过800px的,都会按800px等比例缩放。

.img {max-width: 800px;//非IE浏览器
zoom:expression( function(elm) {//IE浏览器
if (elm.width>800) {
var oldVW = elm.width; elm.width=800;
elm.height = elm.height*(800 /oldVW);
}
elm.style.zoom = '1';
}(this));}
本文标题:《纯CSS控制文章内容图片等比缩放》
网址:https://zhangwenbao.com/css-control-image-proportional-scaling.html
作者:张文保
发布时间:2022-10-09
许可协议:CC BY-NC-SA 4.0
已有 2 条评论
  1. 评论头像

    期待更新

    janice 2022-10-27 18:57:10 中国广东省深圳市移动 回复
    1. 评论头像

      💖好滴~

      张文保 博主 2024-10-31 00:35:34 中国广东省深圳市天威有线宽带(关内) 回复
发表新评论
SSL安全认证