关于响应式图片

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

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

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

图片响应的高度控制

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

<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{ 32%;/* height: 274px; */background-color: #e9ecec;float: left;margin-right: 0.5%;margin-left: 0.7%;padding-bottom: 10px;}
.cont_top3{ 100%;}
.cont_top3 img{ 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;78px;height: 20px; border:1px solid #000000; margin: 0 auto;text-align: center;margin-top: 10px;}