因?yàn)楦讣?jí)div是個(gè)固定的正方形，圖片可能是豎著，也可能是橫著，想讓這些圖片都顯示成正方形，大小剛好是父級(jí)的大小，但是不能改變圖片的比例。原來(lái)的做法是只給width:100%;這樣對(duì)橫著的圖片是可以了，但是豎著的圖片下半截是空白的。如果改成width:100%;height:100%;又會(huì)改變圖片的比例?，F(xiàn)在想到的做法是給圖片加onload，加載完成后判斷它是橫著還是豎著來(lái)給width:100%;或者h(yuǎn)eight:100%;但是覺(jué)得樣式還是應(yīng)該用css，有能做這個(gè)的樣式嗎？
10 回答
已采納
怪盜飯團(tuán)
TA貢獻(xiàn)97條經(jīng)驗(yàn) 獲得超118個(gè)贊
可以不改變比例，但是父div既然是正方形的，那么圖片如果也要是正方形的話就要被裁剪掉了
還有一種是圖片比例不變，做背景圖片
我自己還有種做法，就是可能會(huì)在圖邊上留白,就是水平垂直居中圖片啦
weibo_哆啦A夢(mèng)有大口袋_0
TA貢獻(xiàn)107條經(jīng)驗(yàn) 獲得超146個(gè)贊
根據(jù)你的描述父元素大小是一個(gè)固定寬高，圖片大小不確定。
要想圖片顯示正方形，只有1個(gè)辦法
拉伸
截取
? ??
new_object_
TA貢獻(xiàn)55條經(jīng)驗(yàn) 獲得超117個(gè)贊
圖片填充就是使用如你所說(shuō)的100%，但如果你想讓圖片比例保持不變，那就不可能做到充滿父級(jí)元素。稍微想一下，你用的父級(jí)元素是正方形，寬高比是1:1，非正方形的圖片寬高比必定不是1:1，你的兩個(gè)條件就是相互矛盾的。
如果你仍然不想改變圖片的視覺(jué)效果，那你唯一能改變的就是父級(jí)元素的寬高，就像lightbox圖片顯示插件的效果。你可以設(shè)置圖片橫向充滿父級(jí)，然后通過(guò)js動(dòng)態(tài)改變父級(jí)的高度。
慕容0029924
TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超5個(gè)贊
你塊是正方形的 ?圖是長(zhǎng)方形的怎么可能正好放進(jìn)去 ? 不然就砍掉一塊 ? 或者不完全顯示 ? 再不然就是圖片是正方形的
老猿
TA貢獻(xiàn)86條經(jīng)驗(yàn) 獲得超82個(gè)贊
圖片的大小不能預(yù)先知道的話。 ? 可以用JS算出圖片長(zhǎng)寬各自和父級(jí)DIV的比，那個(gè)比例大，就給那個(gè)100%
jiklin
TA貢獻(xiàn)2條經(jīng)驗(yàn) 獲得超2個(gè)贊
div?{
??width:?150px;
??height:?150px;
??overflow:?hidden;
}
div?img?{
??max-width:?100%;
??max-height:?100%;
}以上代碼可以在不改變圖片比例的情況下最大化顯示圖片，不過(guò)會(huì)存在不能完全顯示的情況。
添加回答
舉報(bào)
0/150
提交
取消