响应式 div 高度答案

【问题标题】：Responsive div height响应式 div 高度
【发布时间】：2020-02-02 00:21:51
【问题描述】：

我有一个 wordpress 网站，顶部有一个容器来显示背景图片。我希望背景与 div 高度保持成比例，以根据屏幕大小进行调整。我目前正在使用高度标签来显示这个区域（参见下面的 CSS）。我基本上希望它在网站很大时不会溢出（在更高分辨率时它会隐藏图像的底部），并且在网站很小时不会在底部显示白色。

如何使高度响应？

您可以在此处查看该网站：http://69.195.124.65/~flywitha/

CSS：

.top_site{
    background: rgba(0, 0, 0, 0) url("/wp-content/themes/alex/images/mast_w-kid_1920x800.jpg") no-repeat scroll right bottom;
    background-size: contain;
 }

.top_site h1{
    font-family:lato, sans-serif;
    color:rgba(40, 40, 40, 0.8);
    padding: 15% 0 9.255% 15%;
    margin:0;
    width:50%;
    font-size:6rem;
    font-weight:bold;
    -webkit-text-stroke: 1px black;
    text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

HTML：

<div class="top_site">
    <h1 class="site-hdr-tag inset-text">
            the<br>
            INTERACTIVE<br>
            AEROSPACE<br>
            LEARNING<br>
            CAMPUS
    </h1>
</div>

【问题讨论】：

how do I give a div a responsive height的可能重复

标签： html css

【解决方案1】：

你可能正在寻找

background-size: cover

或

background-size: contain

【讨论】：

你的意思是contain而不是content？
是的，但是如何负责任地制作 div 大小？我不希望移动设备上的高度为 800 像素。
我的意思是包含，谢谢。关于高度，那么……你想要什么高度？你总是可以使用百分比高度或像 em 这样的相对单位。
我想要保持背景图像的高度。只要容器的大小与背景图像的大小匹配，我将其更改为包含完美的工作。问题是现在容器的大小由左侧的文本区域定义。我将边距设置为百分比，将字体大小设置为 rem，但它不会调整大小。有什么建议么？我已经添加到上面的 CSS 中了。
是的，封面听起来像他想要的。

【解决方案2】：

最简单的解决方案是将容器的高度（和/或宽度）指定为视口高度（和/或宽度）的百分比：

DIV { 高度：25vh;宽度：50vw； }

.myclass { 高度：25vh;宽度：50vw； }

这两个意思都是，将“容器”的大小设置为视口高度的 25% 和宽度的 50%。

干杯

【讨论】：