因为父级div是个固定的正方形，图片可能是竖着，也可能是横着，想让这些图片都显示成正方形，大小刚好是父级的大小，但是不能改变图片的比例。原来的做法是只给width:100%;这样对横着的图片是可以了，但是竖着的图片下半截是空白的。如果改成width:100%;height:100%;又会改变图片的比例。现在想到的做法是给图片加onload，加载完成后判断它是横着还是竖着来给width:100%;或者height:100%;但是觉得样式还是应该用css，有能做这个的样式吗？
10 回答
已采纳
怪盗饭团
TA贡献97条经验 获得超118个赞
可以不改变比例，但是父div既然是正方形的，那么图片如果也要是正方形的话就要被裁剪掉了
还有一种是图片比例不变，做背景图片
我自己还有种做法，就是可能会在图边上留白,就是水平垂直居中图片啦
new_object_
TA贡献55条经验 获得超117个赞
图片填充就是使用如你所说的100%，但如果你想让图片比例保持不变，那就不可能做到充满父级元素。稍微想一下，你用的父级元素是正方形，宽高比是1:1，非正方形的图片宽高比必定不是1:1，你的两个条件就是相互矛盾的。
如果你仍然不想改变图片的视觉效果，那你唯一能改变的就是父级元素的宽高，就像lightbox图片显示插件的效果。你可以设置图片横向充满父级，然后通过js动态改变父级的高度。
jiklin
TA贡献2条经验 获得超2个赞
div {
width: 150px;
height: 150px;
overflow: hidden;
}
div img {
max-width: 100%;
max-height: 100%;
}以上代码可以在不改变图片比例的情况下最大化显示图片，不过会存在不能完全显示的情况。
- 10 回答
- 1 关注
- 3340 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消