寬度是高度的兩倍(等比縮放)實現思路: 以父級元素為基準, 子級width:100%; (也就是父級寬度的100%), padding- top:50% (也就是父級寬度的50%,根據css規範, padding用百分比表示的話, padding: 100%等於父元素的寬度);
##為什麼不直接`width: 50%; height: 50%;?
那樣高度就成了父級高度的50% (不合題意,除非父級寬高相等);原題目:
- 紅色區塊級元素垂直居中於螢幕中央； ##紅色區塊級元素距離螢幕左右邊距各20px;
- 紅色區塊級元素裡面的內容水平垂直居中；
- ##紅色區塊級元素的高度始終是紅色區塊級元素寬度的50%。
紅色部分寬高比2:1
原始碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宽高比例固定</title>
<style>
.father{
overflow: hidden;
position: absolute;
left: 10px;
right: 10px;
top: 50%;
transform: translateY(-50%);
background-color: #0c8ac5;
}
.son{
width: 100%;
padding-top: 50%;
background-color: #c03035;
}
span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: #D8D8D8;
}
img{
float: left;
margin-right: 10px;
border: 2px solid #fdf6e3;
}
</style>
</head>
<body>
<section class="father">
<p class="son"><span><img src="/static/imghwm/default1.png" data-src="https://p2.ssl.cdn.btime.com/t0167d9ebac0d0e1828.jpg" class="lazy" alt="" style="max-width:90%"> 王也, 武当派弟子（现已离开武当），八奇技之一风后奇门的继承人，靠占卜悟出天道，却又作出甘于投身乱世的选择。外表一副老好人的温良相，谦谦有礼如温吞水般，做事也经常是一副没精打采，貌似没睡醒的样子。优哉游哉还脾气软，代表举动经常是歉意笑着作出让步。似乎对什么都无所谓，一副悠然道人之姿，但是在涉及到家人安危时毫不含糊，甚至为此做出过有失冷静的举动。不小心爆粗都会拜祖道歉的出家人，实力在后生一辈中甚至称得上头筹，暂时只有一次完全没预料到地阴沟里翻船。</span></p>
</section>
</body>
</html>相關推薦：
PHP以最大寬高等比例縮放圖片類別
#
以上是CSS實現寬高等比佈局的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
每周平台新聞：Galaxy Store的Web應用程序，Tappable Stories，CSS SubgridApr 14, 2025 am 11:20 AM在本週的綜述中：Firefox獲得了類似鎖匠的力量，三星的Galaxy Store開始支持Progressive Web Apps，CSS Subgrid正在Firefox發貨
每周平台新聞：Internet Explorer模式，搜索控制台中的速度報告，限制通知提示Apr 14, 2025 am 11:15 AM在本週的綜述中：Internet Explorer進入Edge，Google搜索控制台吹捧新的速度報告，而Firefox給出了Facebook＆＃039; s Notification
使用Gatsby組織和準備圖像以使圖像模糊效果的方法Apr 14, 2025 am 10:56 AM蓋茨比（Gatsby）進行了出色的處理和處理圖像。例如，它可以幫助您節省圖像優化的時間，因為您不必手動
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
Atom編輯器mac版下載
最受歡迎的的開源編輯器
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
