为了账号安全,请及时绑定邮箱和手机立即绑定

负责任地改变div尺寸保持高宽比

负责任地改变div尺寸保持高宽比

江户川乱折腾 2019-07-04 10:41:34
负责任地改变div尺寸保持高宽比当我给一个图像百分之一的宽度或高度,它会增长/缩小,保持它的纵横比,但如果我想要与另一个元素相同的效果,它有可能把宽度和高度用百分比绑在一起吗?
查看完整描述

3 回答

?
UYOU

TA贡献1878条经验 获得超4个赞

您可以使用纯CSS完成此操作;不需要JavaScript。这利用了(有点违背直觉的)事实padding-top百分比相对于包含块的百分比宽度..下面是一个例子:

.wrapper {

  width: 50%;

  /* whatever width you want */

  display: inline-block;

  position: relative;

}

.wrapper:after {

  padding-top: 56.25%;

  /* 16:9 ratio */

  display: block;

  content: '';

}

.main {

  position: absolute;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  /* fill parent */

  background-color: deepskyblue;

  /* let's see it! */

  color: white;

}

<div class="wrapper">

  <div class="main">

    This is your div with the specified aspect ratio.

  </div>

</div>


查看完整回答
反对 回复 2019-07-04
?
慕娘9325324

TA贡献1783条经验 获得超4个赞

<style>#aspectRatio{
  position:fixed;
  left:0px;
  top:0px;
  width:60vw;
  height:40vw;
  border:1px solid;
  font-size:10vw;}</style><body><div id="aspectRatio">Aspect Ratio?</div></body>

这里要注意的关键是vw=视口宽度vh=视口高度


查看完整回答
反对 回复 2019-07-04
  • 3 回答
  • 0 关注
  • 434 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号