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上以像素为单位的宽度成比例，我相信您需要一个额外的元素，如下所示：

#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 4

您可以使用视图宽度来设置高度。 100 vw是宽度的100％。 height: 60vw;将高度设置为宽度的60％。

Answer 5

这个答案与其他答案大致相同，只是我不想使用尽可能多的类名。但这只是个人偏好。你可以争辩说，在每个div上使用类名更加透明，因为它预先声明了嵌套div的用途。

<div id="MyDiv" class="proportional">
  <div>
    <div>
      <p>Content</p>
    </div>
  </div>
</div>

这是通用的CSS：

.proportional { position:relative; }
.proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }

然后将第一个内部div设置为设置宽度和高度（padding-top）：

#MyDiv > div { width:200px; padding-top:50%; }

Answer 6

对于寻找可扩展解决方案的任何人：我在SASS中编写了一个小帮助程序实用程序，以便为不同的断点生成响应式比例矩形。看看SASS Proportions

希望它可以帮助任何人！

Answer 7

使用纵横比

.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>

Answer 8

在处理图像时有用的一种方法，但在其他情况下也可以用作解决方法：

<html>
<head>
</head>
<style>
    #someContainer {
        width:50%;
        position: relative;
    }
    #par {
        width: 100%;
        background-color:red;
    }
    #image {
        width: 100%;
        visibility: hidden;
    }
    #myContent {
        position:absolute;
    }
</style>
<div id="someContainer">
    <div id="par">
        <div id="myContent">
            <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>    
        </div>
        <img src="yourImage" id="image"/>
    </div>
</div>
</html>

要使用图像网址替换yourImage。您可以使用具有所需的宽高比的图像。

div id =“ myContent”是解决方法的示例，其中myContent将覆盖在图像上。

这就像：父div将采用图像的高度，图像高度将采用父的宽度。但是图像是隐藏的。

Answer 9

您可以使用vw或vh分配元素的宽度和高度。例如：

#anyElement {
    width: 20vh;
    height: 20vh;
}

这会将宽度和高度都设置为浏览器当前高度的20％，同时保持宽高比。但是，这仅在您要按比例缩放到视口尺寸时有效。

Answer 10

您可以将“视图宽度”用作“宽度”，并将视图宽度的一半再次用作“高度”。这样，无论视口大小如何，都可以保证正确的比例。

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

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

Fiddle

Answer 11

刚刚找到了 Ahmad Shadeed 的 this great article，它使用了 css var 和 math：

.rect {
      --size: 186px;
      --aspect-ratio: 2.35;
      width: var(--size);
      height: calc(var(--size) / var(--aspect-ratio));
    }

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

11 个答案: