css如何将一张图片截取为一个自适应正方形?

灰儿 · 2017-10-7 17:44:16

因为父级div是个固定的正方形，图片可能是竖着，也可能是横着，想让这些图片都显示成正方形，大小刚好是父级的大小，但是不能改变图片的比例。

原来的做法是只给width:100%;这样对横着的图片是可以了，但是竖着的图片下半截是空白的。
如果改成width:100%;height:100%;又会改变图片的比例。

现在想到的做法是给图片加onload，加载完成后判断它是横着还是竖着来给width:100%;或者height:100%;

但是觉得样式还是应该用css，有能做这个的样式吗？

使用css3 的 background-size: cover; 或者就只能用js了

做背景图片吧，如果不需要支持IE老版本的话，可以使用background-size属性cover进行设置。

.your-div {
width: 100px; // 你要的正方形
height: 100px; // 你要的正方形
background-image: url(/your/image/path.jpg);
background-position: center center; // 居中
background-size: cover; // 填满div
background-repeat: no-repeat;
}

另一种方法：
<div class="imgbox">
<img src="img.img">
</div>
<style type="text/css">
.imgbox{
width: 200px;
height: 0;
padding-bottom: 200px;
overflow: hidden;
}

.imgbox img {
width:200px;
min-height: 200px;
}
</style>

灰儿 · 2017-10-7 17:47:15

像微信朋友圈一样，添加图片的时候，等比例正方形显示在列表中，如何让图片根据宽高来自适应显示在页面上呢？示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
<style type="text/css">
.figure-list{
margin: 0;
padding: 0;
}
.figure-list:after{
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.figure-list li{
list-style: none;
float: left;
width: 23.5%;
margin: 0 2% 2% 0;
}
.figure-list figure{
border: 1px solid #000;
position: relative;
width: 100%;
height: 0;
overflow: hidden;
margin: 0;
padding-bottom: 100%; /* 关键就在这里 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.figure-list figure a{
display: block;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
</style>
<ul class="figure-list">
<li>
<figure style="background-image:url(1.png)">
<a href="#"></a>
</figure>
</li>
<li>
<figure style="background-image:url(2.png)">
<a href="#"></a>
</figure>
</li>
<li>
<figure style="background-image:url(3.png)">
<a href="#"></a>
</figure>
</li>
<li>
<figure style="background-image:url(4.png)">
<a href="#"></a>
</figure>
</li>
<li>
<figure style="background-image:url(5.png)">
<a href="#"></a>
</figure>
</li>
<li>
<figure style="background-image:url(6.png)">
<a href="#"></a>
</figure>
</li>
</ul>
</html>

复制代码

从例子里发现元素的 padding 的百分比数值是根据当前元素的宽度来计算的，于是可以利用这个特性来做一些特殊布局。正方形只是矩形的特殊形式，所以需要一定宽高比例的矩形也可以用这个方法。

		自动登录	找回密码
密码			注册

css如何将一张图片截取为一个自适应正方形?

回复

关注我们