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

Can I set any variable in CSS like I want my div height to always be half of width my div scales with the screen size width for div is in percent

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

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

CSS:

CSS：

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

This 30% width scales with screen resolution

这个30％的宽度随屏幕分辨率而变化

5 个解决方案

#1

You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the parent element.

您可以在父项的填充帮助下执行此操作，因为相对填充（甚至高度方式）基于父元素的宽度。

CSS:

CSS：

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

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

For details, see this article on the subject http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/

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

#2

Another great way to accomplish this is to use a transparent image with a set aspect ratio. Then set the width of the image to 100% and the height to auto. That unfortunately will push down the original content of the container. So you need to wrap the original content in another div and position it absolutely to the top of the parent div.

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

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

CSS

CSS

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

#3

If you want vertical sizing proportional to a width set in pixels on an enclosing div, I believe you need an extra element, like so:

如果你想要垂直大小与封闭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;
}

Here's the 2 div solution that doesn't work. Note the 60% vertical padding is proportional to the window width, not the div.ptest width:

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

http://jsfiddle.net/d85FM/

http://jsfiddle.net/d85FM/

Here's the example with the code above, which does work:

这是上面代码的示例，它可以工作：

http://jsfiddle.net/mmq29/

http://jsfiddle.net/mmq29/

#4

For anyone looking for a scalable solution: I wrote a small helper utility in SASS to generate responsive proportional rectangles for different breakpoints. Take a look at SASS Proportions

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

Hope it helps anybody!

希望它可以帮助任何人！

#5

This answer is much the same as others except I prefer not to use as many class names. But that's just personal preference. You could argue that using class names on each div is more transparent as declares up front the purpose of the nested divs.

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

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

Here's the generic CSS:

这是通用的CSS：

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

Then target the first inner div to set width and height (padding-top):

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

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