有這么個需求：

div里有個img標簽，圖片是從后臺傳過來的，寬高不定，長度不定，而div是個寫死了寬高的一個正方形，

需求是，不論圖片寬高多少，比例是什么樣子，讓圖片充滿DIV，且圖片不能走形。

因為div寬高是定死的正方形，為了保證不走形，有一種相對妥協(xié)的實現(xiàn)方案是讓圖片的中心部位顯示在div中來展示。

那么問題來了

我讓IMG寬度100%，如果圖片實際的高>寬，圖片可以充滿div并且中心部分展示,但是遇到高

我想如果css有一種方法可以依據(jù)一張圖片寬高中最短的一邊為依據(jù)靈活設置寬高，那么這個問題就能完美解決了。。

以最長邊為依據(jù)展示圖片，可以使用 max-width 和 max-height來做，

我想問css有沒有辦法依據(jù)一張圖片寬高中最短的一邊為依據(jù)靈活展示圖片呢？

感謝大家的幫助，我最終采納了@banri的答案，感謝@banri！

@耗油牛肉蓋澆飯的答案最全，但是考慮回答的先后，和細節(jié)的描述，我決定還是采納了@banri的！也很感謝你！

有好東西不敢獨享，一個簡單的demo 分享給大家吧：

div{

width:100px;

height:100px;

background:url('6.jpg') no-repeat center;

background-size: cover;

}

這樣就可以實現(xiàn) 無論div尺寸如何變化，比如移動端上用百分比或box設置的自適應寬高的標簽，圖片的中心部位都會在div的正中顯示了，并且圖片填充div也不會變形。

一般實際工作中，圖片是后臺返回來的，所以上述樣式寫在行內(nèi)樣式中即可，這里這么寫比較直觀好看！

對于object-fit也能實現(xiàn)上述效果，之前沒聽過 =。= ！ 又get個新技能！但是它的兼容性是使用它的最大阻礙

IE完全不支持，而移動端safari也是不完全支持的，所以目前來看，使用背景定位比較好！

總結(jié)

以上是生活随笔為你收集整理的css长图如何展示局部,css可以设置图片以最短边为依据展示在父级中吗？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。