CSS 使图片高度等于自身宽度的倍数

Q 问:

现在有一个组件，我们想随意给它个宽度，都能 使它的高度与宽度成比例 。
你可以在组件外部添加容器，但请不要给组件添加 class 和 id 。
请写出该场景的解决方案，要求其样式可复用。代码见下方。

@-v-@

<xxx-component></xxx-component>

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #ffffff;
}

A 答:

我们可以首先给这个组件加一个外层的容器，给该容器设定两个class来使样式可复用

<div class="geometric geometric-1">
  <xxx-component></xxx-component>
</div>

然后我们通过padding来设置这个容器的“宽高”成等比

.geometric {
  background-color: #f4f4f4;
  /*使容器成为组件的定位参考点*/
  position: relative;
  width: 60px;
  height: 0;
  /*默认情况下，显示黄金比例 0.618033988 */
  padding-top: 61.8033988%;
  /*使用padding-bottom也是一样的*/
  /*padding-bottom: 100%;*/
}

.geometric-3-1 {
  padding-top: 33.333333%;
}

.geometric-2-1 {
  padding-top: 50%;
}

.geometric-3-2 {
  padding-top: 66.666666%;
}

.geometric-1 {
  padding-top: 100%;
}

.geometric-2-3 {
  padding-top: 150%;
}

.geometric-g {
  padding-top: 161.8033988%;
}

.geometric-1-2 {
  padding-top: 200%;
}

.geometric-1-3 {
  padding-top: 300%;
}

.geometric > :first-child  {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.geometric > :not(:first-child)  {
  display: none;
}

---

易杭 : http://blog.freeedit.cn/about/ 2017/4/22 23:07 1289字