html5中img父子级样式,css,css3_css可以设置图片以最短边为依据展示在父级中吗？，css,css3,html5,前端 - phpStudy...

css可以设置图片以最短边为依据展示在父级中吗？

有这么个需求：

div里有个img标签，图片是从后台传过来的，宽高不定，长度不定，而div是个写死了宽高的一个正方形，

需求是，不论图片宽高多少，比例是什么样子，让图片充满DIV，且图片不能走形。

因为div宽高是定死的正方形，为了保证不走形，有一种相对妥协的实现方案是让图片的中心部位显示在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也是不完全支持的，所以目前来看，使用背景定位比较好！

相关阅读:

针对密码泄漏事件，都有哪些相对安全的密码加密规则？

PS 如何在一张图中截出同样大小的圆

PHP paypal ipn 返回 INVALID，但是 payment_status=Completed，这是为什么呢？

iptables的nat表中 -j redirect 与-dnat --to-destnation的区别。

Github中Gist的embed和raw功能是如何实现的？

gitbook上写好的书怎么导入github中

simple_html_dom执行出现死循环如何解决？

网易云音乐的通讯加密方式是什么？

请问在一个多层的JAVA企业项目中，大家是如何设计统一异常处理的？

moment日期比较

想用Java实现客户端的智能联想提示，应该选择Lucene之类的全文检索还是选择客户端缓存？

php pdo 缺省错误模式 和 例外模式,差不多,为什么弄两个?

如何在Ubuntu上安装内核对应的源码来编译驱动？

ie计算textarea高度时不包含line-height吗？

新手想在同一服务器上迁移网站地址

什么是 有 作用域的元素啊

angular里的$setTimeout和原生的setTimeout有什么区别么？

Ubuntu12.10中的Dash Home是如何实现的？

有一段带有URL的文本,想在前端可以实现超链接点击,要怎么弄?前端有好办法吗?

js如何“链式”地调用fetch函数