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

Question

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

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

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

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

Answer 1

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

Answer 2

根据你的描述父元素大小是一个固定宽高，图片大小不确定。要想图片显示正方形，只有1个办法拉伸截取    

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%; }以上代码可以在不改变图片比例的情况下最大化显示图片，不过会存在不能完全显示的情况。