資訊專欄INFORMATION COLUMN
摘要：不規(guī)整元素的寬高等比例在不同屏幕情況中不同寬高的元素都以相同等比例等寬和等高方式展示。規(guī)定基于父元素的寬度的百分比的內(nèi)邊距。
不規(guī)整元素的寬高等比例
在不同屏幕情況中不同寬高的元素都以相同等比例、等寬和等高方式展示。
需求設(shè)計(jì)師希望頁(yè)面的圖片區(qū)域，以寬高為2:1比例且所有圖片的等寬和等高的方式展示。小加同學(xué)覺(jué)得設(shè)計(jì)師這需求太容易，分分鐘搞定，拿到圖片后便開始刷刷的擼代碼。原型設(shè)計(jì)稿大致如下:
每個(gè)圖片區(qū)域?qū)挾葹楦冈貙挾鹊?5%，圖片的寬度設(shè)置100%，其高度根據(jù)寬度等比例自動(dòng)縮放（小加以為圖片的寬高應(yīng)該是同比例的），這樣就可以適應(yīng)屏幕達(dá)到要求咯～
HTMLCSS初版
.section {
margin-bottom: 100px;
}
.section__image-wrap {
display: inline-block;
float: left;
padding: 10px;
}
.section__image {
width: 100%;
}
效果圖
吐槽
OMG，這這這...是什么情況啊～ 一行四個(gè)，怎么第二行就一個(gè)，前面三個(gè)位置都是空的，這不可能?。〉鹊?，我需要靜靜～ 貌似圖片不是同比例的寬高的，**這讓我怎么搞，手動(dòng)設(shè)置圖片高度為50%？實(shí)時(shí)計(jì)算高度然后動(dòng)態(tài)設(shè)置圖片高度？
分割線來(lái)咯～ 你能夠嘗試著解決這個(gè)問(wèn)題嗎？
使用padding百分比的方式來(lái)實(shí)現(xiàn)不規(guī)整元素寬高等比例。padding-left/right設(shè)置百分比時(shí)，是參考父元素的寬度；想當(dāng)然的padding-top/bottom設(shè)置百分比時(shí)，是參考父元素的高度，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;
}
效果圖
效果對(duì)比圖
關(guān)鍵知識(shí)點(diǎn)
| padding value | description |
|---|---|
| auto | 瀏覽器計(jì)算內(nèi)邊距。 |
| length | 規(guī)定以具體單位計(jì)的內(nèi)邊距值，比如像素、厘米等。默認(rèn)值是0px。 |
| % | 規(guī)定基于父元素的寬度的百分比的內(nèi)邊距。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承內(nèi)邊距。 |
資源 在線測(cè)試 源代碼w3school
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115256.html
摘要：不規(guī)整元素的寬高等比例在不同屏幕情況中不同寬高的元素都以相同等比例等寬和等高方式展示。規(guī)定基于父元素的寬度的百分比的內(nèi)邊距。 不規(guī)整元素的寬高等比例 在不同屏幕情況中不同寬高的元素都以相同等比例、等寬和等高方式展示。 需求 設(shè)計(jì)師希望頁(yè)面的圖片區(qū)域，以寬高為2:1比例且所有圖片的等寬和等高的方式展示。小加同學(xué)覺(jué)得設(shè)計(jì)師這需求太容易，分分鐘搞定，拿到圖片后便開始刷刷的擼代碼。原型設(shè)計(jì)稿大...
摘要：于是我們就需要實(shí)現(xiàn)一個(gè)寬度自適應(yīng)，高度為寬度一半的容器。一思考如何實(shí)現(xiàn)這個(gè)問(wèn)題類似于我們?cè)谝苿?dòng)端頁(yè)面，上面有一張寬度的圖片，如果我們沒(méi)設(shè)置高度，則圖片會(huì)根據(jù)原有尺寸，等比縮放。我們就可以利用這個(gè)特性，實(shí)現(xiàn)移動(dòng)端的寬高等比自適應(yīng)容器。 在最近開發(fā)移動(dòng)端頁(yè)面，遇到這么一個(gè)情況：當(dāng)頁(yè)面寬度 100% 時(shí)，高度為寬度一半，并隨手機(jī)寬度變化依然是一半。 于是我們就需要實(shí)現(xiàn)一個(gè)寬度自適應(yīng)，高度為寬...
摘要：多列等高高度不一的列以等高方式布局。需求設(shè)計(jì)師說(shuō)某頁(yè)面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺(jué)上保持一致。 多列等高 高度不一的列以等高方式布局。 需求 設(shè)計(jì)師說(shuō)某頁(yè)面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺(jué)上保持一致。小加同學(xué)覺(jué)得必須迅速解決，讓設(shè)計(jì)師妹妹知道我們程序師哥哥的威武。原型設(shè)計(jì)稿大致如下:showImg(ht...
摘要：多列等高高度不一的列以等高方式布局。需求設(shè)計(jì)師說(shuō)某頁(yè)面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺(jué)上保持一致。 多列等高 高度不一的列以等高方式布局。 需求 設(shè)計(jì)師說(shuō)某頁(yè)面的新聞介紹，由于新聞內(nèi)容不同導(dǎo)致顯示區(qū)域的高度不一致，現(xiàn)需要使其高度視覺(jué)上保持一致。小加同學(xué)覺(jué)得必須迅速解決，讓設(shè)計(jì)師妹妹知道我們程序師哥哥的威武。原型設(shè)計(jì)稿大致如下:showImg(ht...
閱讀 2619·2021-11-24 09:39
閱讀 3318·2021-10-09 09:53
閱讀 1199·2021-09-22 16:06
閱讀 4559·2021-09-02 10:18
閱讀 882·2021-08-23 09:42
閱讀 1851·2021-08-17 10:11
閱讀 2754·2019-08-30 13:02
閱讀 2179·2019-08-30 12:49
