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

黒之染
  • 3.1k

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

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

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

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

回复
阅读 7.4k
5 个回答
外籍杰克
  • 8.8k
✓ 已被采纳

做背景图片吧:

.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;
}

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

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

.div {
    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;
}

有矛盾,要显示正方形,又要不能改变图片比例,正方形图片还好,要是不是正方形那怎么办?你是不是要垂直水平居中图片?

容器是正方形,如果图片不是正方形的话,就没有办法不改变比例放到正方形容器中(还能填充满);

宣传栏