需求：
图片的宽高是不固定的，但是外部盒子是有固定大小的。
图片的宽度和盒子保持一致，并且是水平居中显示，即两边是裁剪的
图片的高度是由盒子宽度控制的，等比例缩放，多余的被裁减掉
原图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.box-img {
width: 230px;
height: 230px;
box-sizing: border-box;
border: 1px solid red;
overflow: hidden;
text-align: center;
position: relative;
}
img.one {
display: inline-block;
/*一个图片在一个宽高固定的盒子里，如果只设置图片宽度，那么高度是自适应的。*/
width: 228px;
position: absolute;
left:0;
bottom:0;
}
img.two {
display: inline-block;
width: 228px;
}
img.three {
max-width: 228px;
max-height: 228px;
display: inline-block;
}
</style>
</head>
<body>
<!-- 水平方向上的解决方案 -->
<div class="box-img">
<img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" class="one">
</div>
<div class="box-img">
<img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" class="two">
</div>
<div class="box-img">
<img src="https://img.alicdn.com/bao/uploaded/i3/740173676/TB1Y81Ad5qAXuNjy1XdXXaYcVXa_!!0-item_pic.jpg_400x400.jpg" class="three">
</div>
</body>
</html>效果：
第一种是底部对齐，裁剪顶部
第二种是顶部对齐，裁剪底部
第三种是在固定容器内等比例显示图片
原文地址：http://www.cnblogs.com/yesyes/p/8110419.html
时间： 2025-01-18 06:22:15