資訊專欄INFORMATION COLUMN
摘要：不規整元素的寬高等比例在不同屏幕情況中不同寬高的元素都以相同等比例等寬和等高方式展示。規定基于父元素的寬度的百分比的內邊距。
不規整元素的寬高等比例
在不同屏幕情況中不同寬高的元素都以相同等比例、等寬和等高方式展示。
需求設計師希望頁面的圖片區域，以寬高為2:1比例且所有圖片的等寬和等高的方式展示。小加同學覺得設計師這需求太容易，分分鐘搞定，拿到圖片后便開始刷刷的擼代碼。原型設計稿大致如下:
每個圖片區域寬度為父元素寬度的25%，圖片的寬度設置100%，其高度根據寬度等比例自動縮放（小加以為圖片的寬高應該是同比例的），這樣就可以適應屏幕達到要求咯～
HTMLCSS初版
.section {
margin-bottom: 100px;
}
.section__image-wrap {
display: inline-block;
float: left;
padding: 10px;
}
.section__image {
width: 100%;
}
效果圖
吐槽
OMG，這這這...是什么情況啊～ 一行四個，怎么第二行就一個，前面三個位置都是空的，這不可能啊！等等，我需要靜靜～ 貌似圖片不是同比例的寬高的，**這讓我怎么搞，手動設置圖片高度為50%？實時計算高度然后動態設置圖片高度？
分割線來咯～ 你能夠嘗試著解決這個問題嗎？
使用padding百分比的方式來實現不規整元素寬高等比例。padding-left/right設置百分比時，是參考父元素的寬度；想當然的padding-top/bottom設置百分比時，是參考父元素的高度，Oh no no no... 它也是參考父元素的寬度哦。
CSS .section {
margin-bottom: 100px;
}
.section__image-wrap {
display: inline-block;
float: left;
padding: 10px;
}
.section__image {
width: 100%;
}
.section-revision--padding .section__image-wrap {
position: relative;
padding: 12.5% 0 0 25%;
}
.section-revision--padding .section__image {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 10px;
}
效果圖
效果對比圖
關鍵知識點
| padding value | description |
|---|---|
| auto | 瀏覽器計算內邊距。 |
| length | 規定以具體單位計的內邊距值，比如像素、厘米等。默認值是0px。 |
| % | 規定基于父元素的寬度的百分比的內邊距。 |
| inherit | 規定應該從父元素繼承內邊距。 |
資源 在線測試 源代碼w3school
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54314.html
摘要：不規整元素的寬高等比例在不同屏幕情況中不同寬高的元素都以相同等比例等寬和等高方式展示。規定基于父元素的寬度的百分比的內邊距。 不規整元素的寬高等比例 在不同屏幕情況中不同寬高的元素都以相同等比例、等寬和等高方式展示。 需求 設計師希望頁面的圖片區域，以寬高為2:1比例且所有圖片的等寬和等高的方式展示。小加同學覺得設計師這需求太容易，分分鐘搞定，拿到圖片后便開始刷刷的擼代碼。原型設計稿大...
摘要：于是我們就需要實現一個寬度自適應，高度為寬度一半的容器。一思考如何實現這個問題類似于我們在移動端頁面，上面有一張寬度的圖片，如果我們沒設置高度，則圖片會根據原有尺寸，等比縮放。我們就可以利用這個特性，實現移動端的寬高等比自適應容器。 在最近開發移動端頁面，遇到這么一個情況：當頁面寬度 100% 時，高度為寬度一半，并隨手機寬度變化依然是一半。 于是我們就需要實現一個寬度自適應，高度為寬...
閱讀 2335·2021-11-23 09:51
閱讀 1137·2021-11-22 13:52
閱讀 3610·2021-11-10 11:35
閱讀 1187·2021-10-25 09:47
閱讀 2994·2021-09-07 09:58
閱讀 1059·2019-08-30 15:54
閱讀 2817·2019-08-29 14:21
閱讀 3025·2019-08-29 12:20
