我可以使用CSS按比例缩放div的高度吗？

Question

我可以在CSS中设置任何变量,就像我希望我的div高度总是宽度的一半我的div标度与div的屏幕尺寸宽度是百分比

<div class="ss"></div>

CSS:

.ss {
    width:30%;
    height: half of the width;
}

这个30%的宽度与屏幕分辨率成比例

Answer 1

您可以在父项的填充帮助下执行此操作,因为相对填充(即使是高度方式)也基于父元素的宽度.

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

有关详细信息,请参阅有关主题的文章 http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/

Answer 2

另一个实现此目的的好方法是使用具有设定纵横比的透明图像.然后将图像的宽度设置为100%,将高度设置为自动.不幸的是,这将推倒容器的原始内容.因此,您需要将原始内容包装在另一个div中,并将其绝对定位到父div的顶部.

<div class="parent">
   <img class="aspect-ratio" src="images/aspect-ratio.png" />
   <div class="content">Content</div>
</div>

CSS

.parent {
  position: relative;
}
.aspect-ratio {
  width: 100%;
  height: auto;
}
.content {
  position: absolute;
  width: 100%;
  top: 0; left: 0;
}

Answer 3

您可以使用视图宽度作为“宽度”，再次使用一半的视图宽度作为“高度”。通过这种方式，无论视口大小如何，您都可以保证正确的比例。

<div class="ss"></div>

.ss
{
    width: 30vw;
    height: 15vw;
}

小提琴

Answer 4

如果您希望垂直尺寸与封闭div上以像素为单位设置的宽度成比例，我相信您需要一个额外的元素，如下所示：

#html

<div class="ptest">
    <div class="ptest-wrap">
        <div class="ptest-inner">
            Put content here
        </div>
    </div>
</div>

#css
.ptest {
  width: 200px;
  position: relative;
}

.ptest-wrap {
    padding-top: 60%;
}
.ptest-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #333;
}

这是无效的2 div解决方案。请注意，垂直填充的60％与窗口宽度成正比，而不与div.ptest宽度成正比：

http://jsfiddle.net/d85FM/

这是上面的代码可以正常工作的示例：

http://jsfiddle.net/mmq29/

Answer 5

使用纵横比

.my-div1{
  width: 100px;
  aspect-ratio: 16/9;
  background-color: black;
  margin-top: 10px;
}
.my-div2{
  width: 100px;
  aspect-ratio: 3/4;
  background-color: black;
  margin-top: 10px;
}
.my-div3{
  width: 100px;
  aspect-ratio: 1/1;
  background-color: black;
  margin-top: 10px;
}
.my-div4{
  width: 100px;
  aspect-ratio: 3/9;
  background-color: black;
  margin-top: 10px;
}

<div class="my-div1">
</div>
<div class="my-div2">
</div>
<div class="my-div3">
</div>
<div class="my-div4">
</div>