Question

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

如何使身高响应？

您可以在此处查看该网站：authorization

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>

Answer 1

你可能正在寻找

background-size: cover

或

background-size: contain

Answer 2

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

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

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

这两个意思都是将“容器”的尺寸设置为视口高度的25％，宽度的50％。

欢呼

响应div高度

2 个答案: