热搜：编程 Python Microsoft 编程语言 C++

css图片缩放通过css控制图片自动缩放至css定义大小

发布时间：2023-03-01 16:18:14 来源：互联网

.

西沉的红日，把缕缕落寂的橘红涂满天际。夕阳下，沧桑古老的小道上充满着迷离的格调，显得格外的幽静。天地万物似乎都酣醉在这片凝固着却极短暂的美丽之中，止住了一切声响。

在文章的内容区中，通常会有图片。如果图片的尺寸过大，常会把页面结构撑得变形。
以前，我采用JS来控制，效果还是不错。

这段时间，一直用DIV+CSS的方式来制作页面，发现用CSS来得更方便，相信处理速度也更高。
方法如下：
程序代码

复制代码

代码如下:

<div class=”UBBPanel”>
<div class=”UBBTitle”>
<img src=”images/code.gif” style=”margin:0px 2px -3px 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>

同样可以用对高度进行控制。
这种方法可以满足: 一个页面中，不同图片，超过所需大小时，自动缩成不同尺寸的需求。
应用面也很广，比如：一般的CMS等文章管理中，通常都有小图、大图。而我们在页面上，通常需要读取同一个图片，而分不同尺寸显示。再结合 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就行了

到此这篇关于css图片缩放通过css控制图片自动缩放至css定义大小就介绍到这了。缺乏一种自信的精神，这往往导致一些本来是萌芽了的天才走向自我扼杀。更多相关css图片缩放通过css控制图片自动缩放至css定义大小内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： css