純css實現高度與寬度成給定比例的效果

這幾天作一個列表,要求是在每個item中的圖片都能按照規定的比例顯示.對於image標籤來講,若是是天然的顯示原圖片的比例的話, 下面的css代碼能夠知足:( 在booststrap中,也是下面的寫法)

.img{
    display: block;
    max-width: 100%;
    height: auto;
}

前面的話

描述

可是如今要求不同了,好比我要求每一個圖片必須按照好比4:3的比例顯示出來,不用在意圖片是否被拉伸變形.這樣的目的是實現圖片的響應不一樣設備,保證圖片等比例.若是僅僅經過width和height屬性是不到的,即使height設置成百分比.

能夠設置的height屬性的元素的高度基於包含它的塊級對象的百分比高度。

固然,採用js的辦法確定是能夠解決的,可是用了js後,老是有一個被強X的感受,((⊙o⊙)…).不想用js怎麼辦.

解決

通過一番谷歌以後,仍是找到了我想要的結果,參考的文章在最後.人家說的比我是詳細,多多向人家學習~~

文中做者採用的方法是利用了padding-top/padding-bottom屬性,根據他的解釋,`padding'若是是百分比的話,那這個百分比是相對於其父元素的寬度而言的

而做者使用到了另外一個屬性overflow,另外，在計算 Overflow 時，是將元素的內容區域（即 width / height 對應的區域）和 Padding 區域一塊兒計算的。換句話說，即便將元素的 overflow 設置爲 hidden，「溢出」到 Padding 區域的內容也會照常顯示。

這樣就能使用padding-top/padding-bottom來代替height屬性了.好比你想要讓元素的按在4:3的比例顯示,width設置成了30%,那麼padding-top/padding-bottom只須要設置成爲 40%就能夠了.同時把height設爲0.css代碼以下:

.img-3-4 {
  margin: 10px;
  padding-bottom: 30%;
  width: 40%;
  height: 0;
  background-color: #dbe0e4;
}

栗子以下: 點擊這裏查看效果

咱們發現不論背景圖片或者顏色是什麼樣,我這個元素始終按照4:3的比例顯示

小結

• 到這裏能夠發現,要講的不單單是圖片img的怎麼去按照固定的比例設置了,而是利用padding將元素設置爲固定比例,核心就是利用padding屬性的值是百分比的話,是以父級元素的width走的.
• padding真心十分好用,查閱一些資料,都說比margin的問題要少.
• 今日頭條的wap首頁的列表也採用的這種方法.點擊查看 今日頭條的wap站
• 基礎知識十分重要啊!!!基礎好+作的多,纔會有思路.

參考

純CSS 實現高度與寬度成比例的效果