具有固定高度的全浏览器宽度响应背景图像答案

【问题标题】：Full browser width responsive background image with fixed height具有固定高度的全浏览器宽度响应背景图像
【发布时间】：2023-03-03 08:25:26
【问题描述】：

我知道这类问题已被问过一百万次，而且似乎有大量重复，但我无法找到相关文档或弄清楚如何非常具体地：

将图片设为浏览器窗口的 100% 宽度。
将图片设为背景图片。
使图像具有响应性。
使图像具有可调节的固定高度。（意思是我可以使它成为 500px tall 或 800px tall 并保持其纵横比和整个浏览器宽度）

这可能是纯 css 还是需要 jquery 或 javascript？

我也对引导技术持开放态度。

目前我有这种技术，但它的局限性在于我无法真正定义高度，并且当我将内容放入其中时图像会被裁剪。

HTML：

<div class="page-section">
    <?php if( get_field('landing_hero_image') ): ?>
        <div class="hero-img-wrap">
            <div class="landing-hero" style="background-image: url(<?php the_field('landing_hero_image'); ?>);">
            </div>
        </div>
    <?php endif; ?>
</div>

CSS：

.page-section {
    width:100%;
    position: relative;
}
.landing-hero {
    padding: 22% 0 20% 0;
    margin:auto;
    width: 100%;
    min-height: 100%;
    -webkit-background-size: cover !important;
    -moz-background-size: cover!important;
    background-size: cover!important;
    -o-background-size: cover!important;
}

【问题讨论】：

为什么动态调用背景图片？是否有理由不能将 background-image 与其他 CSS 属性一起设置？
@TheAcolyte 我在 wordpress 中使用高级自定义字段。

标签： css responsive-design background-image

【解决方案1】：

我相信只有使用 CSS 才能实现你想要的。帮助您的链接：

Responsive Images and Background Images

Keeping aspect ratio at all times

我会再发布一个链接作为评论。

【讨论】：

【解决方案2】：

我通过将cover 属性添加到body 然后使用填充在实际div 中定义所需的高度来实现这一点。

CSS

.landing-hero {
    background-size: 100% auto;
    padding-bottom: 42%;
    background-repeat: no-repeat;
}
body {
    font:300 11px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color:#444;
    height: 100%; 
     -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

HTML

<?php if( get_field('landing_hero_image') ): ?>
    <div class="landing-hero" style="background-image: url(<?php the_field('landing_hero_image'); ?>);">
    </div> 
<?php endif; ?>

【讨论】：