css照片放缩 根据css操纵照片全自动放缩至css界定

日期:2021-03-10 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

在文章内容的內容区中,一般会有照片。假如照片的规格过大,常会把网页页面构造撑得形变。
之前,我选用JS来操纵,实际效果還是非常好。

这段時间,1直用DIV+CSS的方法来制做网页页面,发现用CSS来得更便捷,坚信解决速率也更高。
方式以下
程序流程编码

拷贝编码
编码以下:

<div class=”UBBPanel”>
<div class=”UBBTitle”>
<img src=”images/code.gif” style=”margin:0px 2px ⑶px 0px” alt=”程序流程编码”/> 程序流程编码</div>
<div class=”UBBContent”>.new_body .con img{vertical-align: middle;max-width: 630px; width: expression(this.width >630 && this.height < this.width ? 630: true); }
</div></div>

一样能够用对高宽比开展操纵。
这类方式能够考虑: 1个网页页面中,不一样照片,超出所需尺寸时,全自动缩成不一样规格的要求。
运用面也很广,例如:1般的CMS等文章内容管理方法中,一般都有小图、大图。而大家在网页页面上,一般必须载入同1个照片,而分不一样规格显示信息。再融合 overflow:hidden; 坚信照片也就不容易形变了。
程序流程编码

拷贝编码
编码以下:

.pwl_spaceimg{width:160px; height:120px;overflow:hidden; }

.pwl_spaceimg img{width:150px; border:0px; padding:4px; }

最先要讲,这个实际效果最好是用js处理。下面是CSS处理方式

拷贝编码
编码以下:

img {
max-width:400px;
_width:expression_r(this.width<400px?"auto":"400px");
}

expression是对于IE6用的,在FF和IE7+版本号max-width就可以了