dede仿站时防止图片撑破页面的纯css代码

       我们在用织梦建站时,有的时候会碰到上传的图片比较大,如果没固定大小的话它就会撑破页面,如果固定大小的话又会使图片变形,下面介绍一种纯CSS防止图片撑破页面的方法,图片会根据页面自动缩放,这样不会变形也不会撑破页面。

      首先我们要找到内容页调用内容标签的代码比如<div class="content-width">内容标签</div>这样,我们就可以知道内容页的内容是收content-width这个CSS控制的,这时我们只要在页面的头部加入如下CSS代码控制大小:

<style type="text/css">

.content-width {margin: auto;width: 600px;}

.content-width img{max-width: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}

</style>

当然这要根据你页面的大小来限制最大的宽度,如果你的宽度是700那就吧600px改为700px,这样看你网页的具体情况,根据你自己的实际情况修改就可以了,这样限制后,图片就会自动缩放,并且不会变形。


dede教程 2021-08-16 23:48:38 通过 网页 浏览(61)

共有0条评论!

发表评论