css如何限制图片的最大宽度?

html-css012

css如何限制图片的最大宽度?,第1张

我们在制作一个网页的时候,经常要对一个区域里可能出现的图片的宽度进行限制,不然它可能会把页面撑得很烂很烂。

如果你采用固定宽度,长度来设置的话,比如在

<img

height="200px"

width="200px"

中设置,或者是在CSS中用

.img

{height:200pxwidth:200px}

来控制,不同规格的图片有可能会变形。这是一种最蠢的方法。经过摸索,我找到一串CSS代码,可以让图片在超过规定的宽度时,自动缩小,并且是按比例缩小,不会造成图片变形。如下:

.img{

max-width:

200px

height:auto

width:expression(this.width

>

200

?

"200px"

:

this.width)

}

经过不严格测试,这串CSS代码能兼容IE6

IE7

FF。不知道这个算不算是“万能代码”呢?如果你在使用这个代码时发现什么问题,请给我留言。

需要准备的材料分别有:电脑、chrome浏览器、html编辑器。

1、首先,打开html编辑器,新建一个html文件,例如:index.html。

2、其次,在index.html中的<style>标签中,输入css样式代码:body {background: url(image7.jpg) no-repeatbackground-size: 250px}。

3、最后,浏览器运行index.html页面,此时用CSS强制了图片占用250px宽度的大小并且是等比例自动缩放。

1、首先需要新建一个HTML页面。

2、然后输入页面的标题,可以按照下方图中的进行设置。

3、然后在根据下方图片中的代码进行编辑,

4、在两个div的class 中添加相同的控制图片的class名为了 ”img“,并为div添加控制宽度的样式。

5、在两个div中加入相同的图片<img src="images/5.png" />,在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。

6、然后在输入命令.img img{ width:100%height:auto},这样就完成了。