响应地改变div尺寸保持纵横比

ilyo 216 html css responsive-design

当我给图像一个百分比的宽度或高度时,它只会增长/缩小保持其纵横比,但如果我想要与另一个元素相同的效果,是否可以使用百分比将宽度和高度联系在一起?

Chris.. 528

你可以使用纯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>

  • 对于像我这样数学上受损的人:要计算除16:9比率之外的其他东西的填充百分比,请使用此公式(例如使用22:5比率,其中22是A,5是B):B /(A/100)= C%.所以22:5是5/.22 = 22.72%. (48认同)
  • 我不得不说这很棒,甚至可以在IE上运行.大+1 (27认同)
  • 先生,您赢得了互联网.这是巨大的,特别是对于响应式设计的背景图像.谢谢! (8认同)
  • @IlyaD从CSS2规范看一下这个:[little link](http://www.w3.org/TR/CSS21/box.html#propdef-padding-top). (2认同)

Tomas Mulder.. 44

扼杀Chris的想法,另一种选择是使用伪元素,因此您不需要使用绝对定位的内部元素.

<style>
.square {
    /* width within the parent.
       can be any percentage. */
    width: 100%;
}
.square:before {
    content: "";
    float: left;

    /* essentially the aspect ratio. 100% means the
       div will remain 100% as tall as it is wide, or
       square in other words.  */
    padding-bottom: 100%;
}
/* this is a clearfix. you can use whatever
   clearfix you usually use, add
   overflow:hidden to the parent element,
   or simply float the parent container. */
.square:after {
    content: "";
    display: table;
    clear: both;
}
</style>
<div class="square">
  <h1>Square</h1>
  <p>This div will maintain its aspect ratio.</p>
</div>

我在这里放了一个演示:http://codepen.io/tcmulder/pen/iqnDr

  • 这很棒,因为你不需要包裹元素.做得好! (3认同)
  • 如何阻止子级内容扩展父级的高度? (2认同)

Isaac.. 30

<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=视口高度

  • @RyanKilleen除了看起来他正在使用"vw"宽度和高度.因此百分比仍将具有相同的宽高比. (8认同)
  • 请注意,如果屏幕的比例不同,则元素的比率会有所不同,从而失去宽高比. (2认同)