CSS RWD square 正方形

CSS RWD square 正方形

純 CSS 製作自適應 RWD 正方形,可隨容器寬度大小改變,自動調整容器高度,維持正方形比例,而正方形容器中一樣可以有內容,不受影響

HTML:

<div class="demo1 square">
  <div>Hello</div>
</div>

CSS:

/*
CSS RWD square 正方形
"https://vector.cool/css-rwd-square"
*/
.square {
  position: relative;
}
.square::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.square > div {
  position: absolute;
  width: 100%;
  height: 100%;
}

example:

Refrance:
https://spin.atomicobject.com/2015/07/14/css-responsive-square

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包:

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs



ann71727

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料