因為父級div是個固定的正方形，圖片可能是豎著，也可能是橫著，想讓這些圖片都顯示成正方形，大小剛好是父級的大小，但是不能改變圖片的比例。原來的做法是只給width:100%;這樣對橫著的圖片是可以了，但是豎著的圖片下半截是空白的。如果改成width:100%;height:100%;又會改變圖片的比例?，F在想到的做法是給圖片加onload，加載完成后判斷它是橫著還是豎著來給width:100%;或者height:100%;但是覺得樣式還是應該用css，有能做這個的樣式嗎？
10 回答
已采納
怪盜飯團
TA貢獻97條經驗 獲得超118個贊
可以不改變比例，但是父div既然是正方形的，那么圖片如果也要是正方形的話就要被裁剪掉了
還有一種是圖片比例不變，做背景圖片
我自己還有種做法，就是可能會在圖邊上留白,就是水平垂直居中圖片啦
new_object_
TA貢獻55條經驗 獲得超117個贊
圖片填充就是使用如你所說的100%，但如果你想讓圖片比例保持不變，那就不可能做到充滿父級元素。稍微想一下，你用的父級元素是正方形，寬高比是1:1，非正方形的圖片寬高比必定不是1:1，你的兩個條件就是相互矛盾的。
如果你仍然不想改變圖片的視覺效果，那你唯一能改變的就是父級元素的寬高，就像lightbox圖片顯示插件的效果。你可以設置圖片橫向充滿父級，然后通過js動態改變父級的高度。
jiklin
TA貢獻2條經驗 獲得超2個贊
div?{
??width:?150px;
??height:?150px;
??overflow:?hidden;
}
div?img?{
??max-width:?100%;
??max-height:?100%;
}以上代碼可以在不改變圖片比例的情況下最大化顯示圖片，不過會存在不能完全顯示的情況。
- 10 回答
- 1 關注
- 3619 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消