Question

我知道这类问题已经被问了一百万次，而且看起来有很多重复，但我还没有找到文件或者弄清楚如何非常具体：

使图像的浏览器窗口宽度为100％。
使图像成为背景图像。
使图像响应。
使图像具有可调节的固定高度。（意思是我可以让它500px高或800px高，并保留其宽高比和完整的浏览器宽度）

这可能与纯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;
}

Answer 1

我相信你只能用CSS实现你想要的东西。链接，以帮助您：

Responsive Images and Background Images

Keeping aspect ratio at all times

我将发布一条链接作为评论。

Answer 2

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

<强> CSS

body

<强> HTML

.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;
}

完整的浏览器宽度响应背景图像与固定高度

2 个答案: