html5 - css3有没有让图片在一个正方形div中大小刚好的方法？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - css3有没有让图片在一个正方形div中大小刚好的方法？

迷茫 2017-04-17 13:07:41

[HTML讨论组]

597

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

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

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

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

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(5)

阿神2017-04-17 13:09:41 5楼

做背景图片吧：

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

赞 +0

添加回复

大家讲道理2017-04-17 13:09:41 4楼

设置成背景，然后增加
background-size:cover

赞 +0

添加回复

天蓬老师2017-04-17 13:09:41 3楼

可以不改变比例，但是父p既然是正方形的，那么图片如果也要是正方形的话就要被裁剪掉了
还有一种是图片比例不变，做背景图片，一楼已经回答了。
我自己还有种做法，就是可能会在图边上留白,就是水平垂直居中图片啦

.p {
    position: relative;
    width: 200px;
    height: 200px;
}
.img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

赞 +0

添加回复