如何在HTML中用CSS对图片进行缩放

Question

如题所述

Answer 1

可以用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指的是缩放比例：

Answer 2

css3中新增了一个属性。 transform: scale();可以对图片进行放大 缩小

比如。transform:scale(0.5),表示引用该样式的内容进行了缩小了一半，反之，如果括号里面的值为（1.5）那么表示 内容放大了1.5倍。

做一个示例演示图一是图片缩小了（0.5） 图二是图片放大了（1.5）的效果演示。

附上源码供参考

本回答被网友采纳

Answer 3

html中css对图片进行缩放，用到的工具：notepad++,步骤如下：

html部分:

<div class="tu"><img src="images/1.jpg">

2.css控制图片缩放：

.tu img{
 max-height:720px; 
 max-width:640px; 
 width:expression(this.width > 640 && this.height < this.width ? 640: true); 
 height:expression(this.height > 720 ? 720: true);
}

说明：图片大于640自动缩放到640px，如果小于640px即为实际大小，高度大于720px缩放到720px，小于720px为实际大小。

注意事项：一般对图片告诉不控制大小。

本回答被网友采纳