今天在做照片墙的时候出现了照片尺寸无法控制这一问题,以下是解决方案：
1、注意图片宽度和边框宽度的关系（即图片宽度<=边框宽度）
2、将边框宽度设置为auto,在<body>里添加clearfix
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<style>
div.img{
margin:5px;
border:1px solid #ccc;
float:left;
width:auto;
}
div.img:hover{
border:1px solid #777;
}
div.img img{
width:100%
height:auto
}
div.des{
padding:15px;
text-align:center;
}
</style>
</head>
<body>
<div>
<div class="clearfix">
<div class="img">
<a target="_blank"href="yoga1.jpg">
<img src="yoga1.jpg"alt="图片文本描述"width="300"height="180">
</a>
<div class="des">yoga1</div>
</div>
</div>
<div>
<div class="img">
<a target="_blank" href="yoga2.jpg">
<img src="yoga2.jpg"alt="图片文本描述"width="300"height="180">
</a>
<div class="des">yoga2</div>
</div>
</div>
<div>
<div class="img">
<a target="_blank"href="yoga3.png">
<img src="yoga3.png"alt="图片文本描述"width="300"height="180">
</a>
<div class="des">yoga3</div>
</div>
</div>
<div>
<div class="img">
<a target="_blank"href="yoga4.jpg">
<img src="yoga4.jpg"alt="图片文本描述"width="300"height="180">
</a>
<div class="des">yoga4</div>
</div>
</div>
</div>
</body>
</html>