將圖像縮放爲全角

我收到了一些圖像，我需要它們在整個頁面寬度上縮放，但在高度上，它應該保持設計目的的高度。（不要怪我，這就是設計者想要什麼）將圖像縮放爲全角

我有這樣的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; 
}

This is how it should NOT look.

上面的截圖是怎麼它不應該看。

來源

2014-03-05 user3239713

'背景大小：100％自動.. ..我認爲這是你需要的。 –

你可以採取幾種不同的方式。

背景大小應該可以做到。

background-size:100% 400px;

在本例中的寬度是100％，如果你想要一個圖像覆蓋它，不管你能一起去什麼高度將被固定爲400像素

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

來源

2014-03-05 08:41:12

將圖像縮放爲全角

回答

相關問題