問(wèn)題描述

為了防止圖片變形，規(guī)定了<img>標(biāo)簽的width:100%;height:auto;但是，這樣會(huì)出現(xiàn)兩種情況:1、圖片高度無(wú)法填充滿容器2、圖片高度大于容器的高度針對(duì)第二個(gè)問(wèn)題，我直接規(guī)定容器overflow:hidden;但是，第一個(gè)問(wèn)題該如何解決，如果將<img>高度設(shè)置為100%的話，就會(huì)變形.請(qǐng)大神們幫忙解答..

問(wèn)題解答

用p代替img 使用background-size:100%;

圖片不變形就需要保證其橫縱比->容器與圖片橫縱比相同->不可修改圖片就需要重新規(guī)劃布局

可修改圖片從而達(dá)到圖片不“變形” 將圖片采用background-image

再提供另一種方案，即容器固定，圖片自適合：

img { max-width: 100%; max-height: 100%;}回答4：

可以嘗試下樓上的方案，如果不行就需要用JS獲取圖片寬高再進(jìn)行判斷動(dòng)態(tài)設(shè)置width：100%或者h(yuǎn)eight：100%