关于响应式图片

一般都是img{display:block,width:100%},这种的响应式图片是等比例缩放宽高

如果想让图片的高度保持不变的话eg:

.cont_center_f1{width:90%;height: 450px; margin:0 auto;}
.cont_center_f1 img{width: 100%;height: 450px;}

 

<div  class="cont_center_f1"><img src="images/team4.jpg"></div>

 

 

图片响应的高度控制

主要是灰色框的高度不要写，让内容给它撑开，写边距就行

<h2>私密美容中心</h2>
<div class="line"></div>
<div class="cont_top1">
<div class="cont_top2">
<div class="cont_top3"><img src="images/show1.jpg"></div>
<div class="cont_top4">眼部整形-开眼角</div>
<div class="cont_top5"><a href="#">点击查看</a></div>
</div>
<div class="cont_top2">
<div class="cont_top3"><img src="images/show2.jpg"></div>
<div class="cont_top4">眼部整形-开眼角</div>
<div class="cont_top5"><a href="#">点击查看</a></div>
</div>
<div class="cont_top2">
<div class="cont_top3"><img src="images/show3.jpg"></div>
<div class="cont_top4">眼部整形-开眼角</div>
<div class="cont_top5"><a href="#">点击查看</a></div>
</div>
<div class="cont_top2">
<div class="cont_top3"><img src="images/show1.jpg"></div>
<div class="cont_top4">眼部整形-开眼角</div>
<div class="cont_top5"><a href="#">点击查看</a></div>
</div>
<div class="cont_top2">
<div class="cont_top3"><img src="images/show2.jpg"></div>
<div class="cont_top4">眼部整形-开眼角</div>
<div class="cont_top5"><a href="#">点击查看</a></div>
</div>
<div class="cont_top2">
<div class="cont_top3"><img src="images/show3.jpg"></div>
<div class="cont_top4">眼部整形-开眼角</div>
<div class="cont_top5"><a href="#">点击查看</a></div>
</div>

.cont_top2{width: 32%;/* height: 274px; */background-color: #e9ecec;float: left;margin-right: 0.5%;margin-left: 0.7%;padding-bottom: 10px;}
.cont_top3{width: 100%;}
.cont_top3 img{width: 100%;}
.cont_top4{text-align: center; margin-top: 10px;font-size: 1.4em;}
.cont_top5{}
.cont_top2:hover{background-color: #8123ca;color: #ffffff}
.cont_top5 a{color: #000000;display: block;width:78px;height: 20px; border:1px solid #000000; margin: 0 auto;text-align: center;margin-top: 10px;}