CSS实现宽度自适应100%,宽高16:9的比例的矩形

最新推荐文章于 2024-08-15 15:09:51 发布

我是洋葱啊

最新推荐文章于 2024-08-15 15:09:51 发布

阅读量3.2k

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/yzn77/article/details/82711798

版权

HTML+CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

看别人的面经看到的问题，在网上搜了下答案：

CSS实现宽度自适应100%,宽高16:9的比例的矩形：


  <!DOCTYPE html>
  <html>
  <head>
  	<title></title>
  	<style type="text/css">
  		.img_wap{
    padding-bottom: 56%;
    width: 100%;
    position: relative;
  }

  .img_wap img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;  
  }
  	</style>
  </head>
  <div style="width:160px;">
  	<div class="img_wap">
   		<img src=""/>
	</div>
  </div>

为了能具体点，把最外的div宽度设置成了160px；

那么问题来了，为什么子元素（img）的高度=父元素（img_wap）的padding-bottom？

1.padding和margin都是相对于父元素的宽度来计算的,因此img_wap的padding-bottom=160*56%=89.6≈90

2.绝对定位之后已经是脱离文档流了，这时候子元素的宽高就是相对于`relative `父元素的边界了

未设置position: absolute; 的元素的百分比高度的计算是相对于已将产生的盒子的内容块的高度，本文即是父元素，父元素高度为0，则该元素高度也为0，但是里面有内容，内容有多少就撑开多高，不会占据100%高度；

设置 position: absolute; 的元素的百分比高度的计算是相对于父元素的padding区域+内容区域，所以设置height:100%后，该元素的高度撑满了整个父元素，同时也可以设置其它百分比高度，同时可以有效撑开元素。

因此img的height=100%*（89.6+0）=89.6。