css可以设置图片以最短边为依据展示在父级中吗？
有这么个需求：
div里有个img标签，图片是从后台传过来的，宽高不定，长度不定，而div是个写死了宽高的一个正方形，
需求是，不论图片宽高多少，比例是什么样子，让图片充满DIV，且图片不能走形。
因为div宽高是定死的正方形，为了保证不走形，有一种相对妥协的实现方案是让图片的中心部位显示在div中来展示。
那么问题来了
我让IMG宽度100%，如果图片实际的高>宽，图片可以充满div并且中心部分展示,但是遇到高<宽的图片，我让IMG宽度100%，图片在div里不能完全展示，可能在垂直方向上，上下会有留白出现。
我想如果css有一种方法可以依据一张图片宽高中最短的一边为依据灵活设置宽高，那么这个问题就能完美解决了。。
以最长边为依据展示图片，可以使用 max-width 和 max-height来做，
我想问css有没有办法依据一张图片宽高中最短的一边为依据灵活展示图片呢？
感谢大家的帮助，我最终采纳了@banri的答案，感谢@banri！
@耗油牛肉盖浇饭的答案最全，但是考虑回答的先后，和细节的描述，我决定还是采纳了@banri的！也很感谢你！
有好东西不敢独享，一个简单的demo 分享给大家吧：
div{
width:100px;
height:100px;
background:url('6.jpg') no-repeat center;
background-size: cover;
}
这样就可以实现 无论div尺寸如何变化，比如移动端上用百分比或box设置的自适应宽高的标签，图片的中心部位都会在div的正中显示了，并且图片填充div也不会变形。
一般实际工作中，图片是后台返回来的，所以上述样式写在行内样式中即可，这里这么写比较直观好看！
对于object-fit也能实现上述效果，之前没听过 =。= ！ 又get个新技能！但是它的兼容性是使用它的最大阻碍
IE完全不支持，而移动端safari也是不完全支持的，所以目前来看，使用背景定位比较好！
wufei33
9 years, 8 months ago
Answers
你让这个图片在这个div中水平垂直居中
cssdiv { font-size: 0; } div>* { font-size: 1rem; display: inline-block; vertical-align: middle; } div::before { content: ''; height: 100%; width: 0; }
然后设置图片
cssimg { max-width: 100%; max-height: 100%; }
切记不能设置width和height属性。
以上是未经实验的，楼主可以实验一番，成功率应该还可以。
霸王硬上弓
answered 9 years, 8 months ago
没有，要用js
javascriptpath = 'path/to/image'; container = document.getElementById('div_id'); img = document.createElement('img'); img.src = path; // 这里需要等图片载入之后才能进行后续操作，否则会有问题 img.onload = function () { if(img.width > img.height){ img.style.width = img.width; }else{ img.style.height = img.height; } container.appendChild(img); }
kula321
answered 9 years, 8 months ago
