关于如何利用CSS自动调整图片的大小

2024-11-05 20:30:39

推荐回答（5个）

回答（1）：

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

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

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

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

5、在两个div中加入相同的图片，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。

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

回答（2）：

img {max-width: 800px;  height: auto;}

代码中的max-width:800px限制图片的最大宽度为800像素，而下面的hight:auto很关键，可以保证图片有正确的长宽比，不至于因为被调整宽度而变形。

img {width:100%;height: auto;}

这种css是图片自适应，不管img的父元素宽度高度如何调整，img都会等比填充，知道宽度和父元素一样。

img { width:100px; height:100px;}

这种是直接控制图片的宽和高

回答（3）：

回答（4）：

不用再CSS里调吧
HTML里直接都可以了
如下

也可以直接做个小的图片在放到网页里

希望有帮助..

回答（5）：

js版和css版自动按比例调整图片大小方法，分别如下：
javascript图片大小处理函数

纯css的防止图片撑破页面的代码，图片会自动按比例缩小：