Html 我可以使用 CSS 按宽度按比例缩放 div 的高度吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8894506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I scale a div's height proportionally to its width using CSS?
提问by spiderman
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% 的宽度随屏幕分辨率缩放
回答by Stefan H Singer
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;
}
This is based on this article: Proportional scaling of responsive boxes using just CSS
这是基于这篇文章： 仅使用 CSS 按比例缩放响应框
回答by jdavis
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;
}
回答by zlovelady
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.ptestwidth:
这是不起作用的 2 div 解决方案。注意 60% 垂直填充与窗口宽度成正比，而不是div.ptest宽度：
Here's the example with the code above, which does work:
这是上面代码的示例，它确实有效：
回答by GDavoli
You can use View Width for the "width" and again half of the View Width for the "height". In this way you're guaranteed the correct ratio regardless of the viewport size.
您可以使用视图宽度作为“宽度”，再次使用一半的视图宽度作为“高度”。通过这种方式，无论视口大小如何，您都可以保证正确的比例。
<div class="ss"></div>
<div class="ss"></div>
.ss
{
width: 30vw;
height: 15vw;
}
回答by Lee Gunn
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%; }
回答by BrunoFenzl
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!
希望它可以帮助任何人！
回答by Skulio
One way usefull when you work with images, but can be used as workaround otherwise:
处理图像时有用的一种方法，但也可以用作解决方法：
<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>
To use replace yourImage with your image url. You use image with width / height ratio you desire.
使用将 yourImage 替换为您的图片网址。您使用具有所需宽度/高度比率的图像。
div id="myContent" is here as example of workaround where myContent will overlay over image.
div id="myContent" 在这里作为解决方法的示例，其中 myContent 将覆盖在图像上。
This works like: Parent div will adopt to the height of image, image height will adopt to width of parent. However image is hidden.
这就像：父div将采用图像的高度，图像高度将采用父级的宽度。但是图像是隐藏的。
回答by Joe Giusti
You can use the view width to set the height. 100 vw is 100% of the width.
height: 60vw;would make the height 60% of the width.
您可以使用视图宽度来设置高度。100 vw 是宽度的 100%。
height: 60vw;将使高度为宽度的 60%。
