请教css 控制图片大小

html-css016

请教css 控制图片大小,第1张

不知道家有没有遇到过这样的情况：在CSS控制图片大小时，如果把图片的宽度写死，比如 img{width:500px} ，固然，如果图片宽度大于500px可以很好的控制它不让它过大，但如果图片宽度小于500px，比如说只有100px时，刚才的写法会把这张图扩大5倍显示，显然，这不是我们想看到的。 那么，CSS如何可以区分对待这些图片设置大小呢？很简单，请看： 复制代码 代码如下:img{width:expression(this.width>500?"500px":this.width+"px")} 只要在CSS运用这段代码，就可以分别控制大图片与小图片。它的意思就是，如果图片宽度大于500px，那么图片就以500px的大小显示，如果小于的话，那么图片就按照原有尺寸显示！怎么样，是不是确实很简单？ 弊端：增加客户端的负荷，一般用js实现的比较多。

可以用css3中“transform: scale()”属性对图片进行缩放。

1、新建html文档，在body标签中添加一张图片，给这张图片设置css属性，添加“tansform”缩放属性，属性值为“scaleX(n)”，scaleX(n)指的是对宽度进行缩放，n指的是缩放比例：

2、将transform的属性值改为“scaleY(n)”，scaleY(n)指的是对高度进行缩放，n指的是缩放比例：

3、将transform的属性值改为“scale(n)”，scale(n)指的是对图片的宽度和高度同时进行等比例缩放，n指的是缩放比例：

需要准备的材料分别有：电脑、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宽度的大小并且是等比例自动缩放。