将图像缩放到全宽

Question

我收到了几张图片，我需要它们在页面的整个宽度上缩放，但是在高度上，它应该保持相同的高度以便设计。 （不要怪我，这就是设计师想要的）

我有这个HTML：

<section id="fotografie-intro">
    <div class="details">
        <h1>Fotografie</h1>
        <span>Professionele, realistisch foto&apos;s gemaakt door een professionele fotograaf.</span>
        <span>&euro; 75 <small>per set</small></span>
    </div>
</section>

我有这个CSS：

#fotografie-intro {
    background: url(../img/unscaledPics/FOTOGRAFIE_headerfoto.jpg);
    background-size: 100% 100%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    font-family: 'Titillium Web', sans-serif;
    color: rgb(246, 246, 246);
}
#fotografie-intro .details{
    background-color: rgba(0, 0, 0, 0.6);
    width: 33.333333%;
}

#fotografie-intro h1 {
    width: 350px;
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
    padding-top: 40px;
    z-index: 88;
}

#fotografie-intro span {
    display: block;
    width: 250px;
    padding-top: 20px;
    text-align: left;
    padding-left: 40px;
    font-weight: 100;
}

#fotografie-intro span:last-child {
    font-size: 2em;
    padding-left: 40px;
}

上面的截图是不应该看的。

Answer 1

你可以采取几种不同的方式。

背景大小应该可以解决问题。

background-size:100% 400px;

在示例中，宽度为100％，高度将固定为400px

如果您希望图像覆盖它，无论您使用什么

background-position: center;
background-size: cover;