有這么個需求：

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也是不完全支持的，所以目前來看，使用背景定位比較好！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。