這幾天做一個列表,要求是在每一個item中的圖片都能按照規(guī)定的比例顯示.對于image標(biāo)簽來說,如果是自然的顯示原圖片的比例的話,
下面的css代碼可以滿足:( 在booststrap中,也是下面的寫法)
.img{
display: block;
max-width: 100%;
height: auto;
}
前面的話
描述
但是現(xiàn)在要求不一樣了,比如我要求每個圖片必須按照比如4:3的比例顯示出來,不用在乎圖片是否被拉伸變形.這樣的目的是實現(xiàn)圖片的響應(yīng)不同設(shè)備,保證圖片等比例.如果僅僅通過width和height屬性是不到的,即便height設(shè)置成百分比.
可以設(shè)置的height屬性的元素的高度基于包含它的塊級對象的百分比高度。
當(dāng)然,采用js的辦法肯定是可以解決的,但是用了js后,總是有一個被強(qiáng)X的感覺,((⊙o⊙)…).不想用js怎么辦.
解決
經(jīng)過一番谷歌之后,還是找到了我想要的答案,參考的文章在最后.人家說的比我是詳細(xì),多多向人家學(xué)習(xí)~~
文中作者采用的方法是利用了padding-top/padding-bottom屬性,根據(jù)他的解釋,`padding'如果是百分比的話,那這個百分比是相對于其父元素的寬度而言的
而作者使用到了另一個屬性overflow,另外，在計算 Overflow 時，是將元素的內(nèi)容區(qū)域（即 width / height 對應(yīng)的區(qū)域）和 Padding 區(qū)域一起計算的。換句話說，即使將元素的 overflow 設(shè)置為 hidden，“溢出”到 Padding 區(qū)域的內(nèi)容也會照常顯示。
這樣就能使用padding-top/padding-bottom來代替height屬性了.比如你想要讓元素的按在4:3的比例顯示,width設(shè)置成了30%,那么padding-top/padding-bottom只需要設(shè)置成為
40%就可以了.同時把height設(shè)為0.css代碼如下:
.img-3-4 {
margin: 10px;
padding-bottom: 30%;
width: 40%;
height: 0;
background-color: #dbe0e4;
}
栗子如下:
點擊這里查看效果
我們發(fā)現(xiàn)不論背景圖片或者顏色是什么樣,我這個元素始終按照4:3的比例顯示
小結(jié)
- 到這里可以發(fā)現(xiàn),要講的不僅僅是圖片
img的怎么去按照固定的比例設(shè)置了,而是利用padding將元素設(shè)置為固定比例,核心就是利用padding屬性的值是百分比的話,是以父級元素的width走的. -
padding真心十分好用,查閱一些資料,都說比margin的問題要少. - 今日頭條的wap首頁的列表也采用的這種方法.點擊查看 今日頭條的wap站
- 基礎(chǔ)知識十分重要啊!!!基礎(chǔ)好+做的多,才會有思路.
