css3有没有让大小刚好是父级的大小，但是不能改变图片的比例。

Question

因为父级div是个固定的正方形，图片可能是竖着，也可能是横着，想让这些图片都显示成正方形，大小刚好是父级的大小，但是不能改变图片的比例。原来的做法是只给width:100%;这样对横着的图片是可以了，但是竖着的图片下半截是空白的。如果改成width:100%;height:100%;又会改变图片的比例。现在想到的做法是给图片加onload，加载完成后判断它是横着还是竖着来给width:100%;或者height:100%;但是觉得样式还是应该用css，有能做这个的样式吗？

Answer 1

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

Answer 2

1. 根据你的描述父元素大小是一个固定宽高，图片大小不确定。

2. 要想图片显示正方形，只有1个办法

   1. 拉伸

   2. 截取

    

Answer 3

图片填充就是使用如你所说的100%，但如果你想让图片比例保持不变，那就不可能做到充满父级元素。稍微想一下，你用的父级元素是正方形，宽高比是1:1，非正方形的图片宽高比必定不是1:1，你的两个条件就是相互矛盾的。

如果你仍然不想改变图片的视觉效果，那你唯一能改变的就是父级元素的宽高，就像lightbox图片显示插件的效果。你可以设置图片横向充满父级，然后通过js动态改变父级的高度。

Answer 4

你块是正方形的  图是长方形的怎么可能正好放进去   不然就砍掉一块   或者不完全显示   再不然就是图片是正方形的

Answer 5

图片的大小不能预先知道的话。   可以用JS算出图片长宽各自和父级DIV的比，那个比例大，就给那个100%

Answer 6

div {
  width: 150px;
  height: 150px;
  overflow: hidden;
}
div img {
  max-width: 100%;
  max-height: 100%;
}

以上代码可以在不改变图片比例的情况下最大化显示图片，不过会存在不能完全显示的情况。