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}，这样就完成了。
不知道家有没有遇到过这样的情况：在CSS控制图片大小时，如果把图片的宽度写死，比如 img{width:500px} ，固然，如果图片宽度大于500px可以很好的控制它不让它过大，但如果图片宽度小于500px，比如说只有100px时，刚才的写法会把这张图扩大5倍显示，显然，这不是我们想看到的。 那么，CSS如何可以区分对待这些图片设置大小呢？很简单，请看： 复制代码 代码如下:img{width:expression(this.width>500?"500px":this.width+"px")} 只要在CSS运用这段代码，就可以分别控制大图片与小图片。它的意思就是，如果图片宽度大于500px，那么图片就以500px的大小显示，如果小于的话，那么图片就按照原有尺寸显示！怎么样，是不是确实很简单？ 弊端：增加客户端的负荷，一般用js实现的比较多。html代码如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>div中放置图片</title><link rel="stylesheet" href="liu.css"/></head><body><div class="center"><img src="./image/1.jpg"rel=""/></div></body></html>
css代码如下：
*{
margin: 0
padding: 0
}
/*方法一*/
.center{
width: 500px
height: 300px
background: pink
/*实现div里的图片水平垂直居中*/
display: table-cell
text-align: center
vertical-align: middle
}
.center>img{
/*1,图片过大1024*1024，让图片和布局高度宽度等比例缩放*/
width: 300px
height: 180px
}
