HTML – 响应div高度

2024年1月22日 268次阅读

我有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>

最佳答案 你可能正在寻找

background-size: cover

要么

background-size: contain
点赞