css中斷而不是縮小

使用下面的CSS，我試圖使用附加的圖像作爲背景圖像。當我縮小瀏覽器尺寸時，我希望圖像能夠以可擴展的方式調整大小，但是，在600px處，女性的頭部不再可見。換句話說，不是減小圖像內容的比例（即縮小），而是簡單地切掉圖像的右側。有減少圖像的方法，而不是讓css在縮小瀏覽器尺寸時切斷圖像的右側？css中斷而不是縮小

html { 
    height: 100%; 
} 
body { 
    font-family: Lato, sans-serif; 
    color: #333; 
    font-size: 15px; 
    line-height: 23px; 
    font-weight: 300; 
} 
.hero-section { 
    width: 100%; 
    background-image: url('./3479295472_7d97d686e4_b_couple.jpg'); 
    background-position: 50% 45%; 
    background-size: cover; 
} 

<div class="hero-section"> 
    <div class="hero-overlay-section"> 
    <div class="container hero-container w-container"> 
    <h1 class="hero-title" data-ix="hero-fade-in" style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 500ms, transform 500ms;">Jim</h1> 
    <h1 class="and hero-title" data-ix="hero-fade-in-2" style="opacity: 1; transition: opacity 1500ms;">&amp;</h1> 
<h1 class="hero-title" data-ix="hero-fade-in-3" style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 500ms, transform 500ms;">Karen</h1> 
<div class="hero-divider-line" data-ix="hero-fade-in-4" style="opacity: 1; width: 120px; transition: opacity 500ms, width 500ms;"></div> 
    <div class="hero-date-wrapper"> 
    <h2 class="hero-date-title" data-ix="hero-fade-in-5" style="opacity: 1; transition: opacity 500ms;">November 5th, 2018</h2> 
    </div> 
</div> 
</div> 
</div>

注意，根據上this SO questionbackground-size評論應該幫助，但它不是我的情況。

更新：

我自己也嘗試用，得到了相同的結果（女子的頭部被切斷一次我減少瀏覽器的大小）。

background-size: contain; 
background-repeat: no-repeat;

來源

2017-08-15 Leahcim

請注意，圖片是來自https://www.flickr.com/photos/heroiclife/3479295472/in/album-72157617283714929/ – Leahcim

的創意共享，你可以發佈你的HTML代碼這個問題？ –

@MarouenMhiri發佈了它 – Leahcim

發現什麼都其他人說，大約background-size: cover;和background-position: center center是正確的。

基本上，你有兩種選擇。

您可以強制圖像永遠不會被裁剪。最好的例子是<img>的默認行爲。它會擠壓和調整大小，但不會裁剪。這樣做的缺點是您必須保持圖像的原始高寬比。
您可以忽略圖像的高寬比，並告訴它無論比例如何填充容器。這是background-size: cover; background-position: center center;解決方案。你可以玩這個位置，這樣重要的部分就不會被裁剪了。

如果必須保持縱橫比，和有它填充的容器，那麼唯一的解決辦法是在頂部/底部有黑條或左/右（就像看一個寬銀幕電影4：3電視）。

來源

2017-08-15 20:17:42 Brian

布萊恩幹得好。 – 2017-08-15 20:27:02

不能顯示與任何尺寸的容器完全適合的形象，你必須失去一些零件。

你可以做的是選擇圖像中最重要的部分顯示出來，這是通過操縱background-position

通常做，在大多數情況下，最重要的部分是中心。所以我們使用background-position: 50% 50%; background-size: cover;

你可以從這裏開始。

來源

2017-08-15 20:03:59

有幾種方法可以解決這個問題，其中最好的方法是使用HTML5。下面是代碼：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

的代碼和附加的方式和演示的來源可以在https://css-tricks.com/perfect-full-page-background-image/

來源

2017-08-15 20:10:34 Cecobent

以像素爲單位添加身高。我添加了700px，但是你可以添加任何你喜歡的東西。

在英雄節，你的CSS更改爲以下：

.hero-section { 
    width: 100%; 
    height: 100%; 
    background-image: url('./3479295472_7d97d686e4_b_couple.jpg');       
    background-size: contain; 
    background-repeat: no-repeat; 
    }

什麼似乎是關鍵的是與背景大小和背景重複指令沿指定高度和寬度。

高度和寬度可以根據您的喜好進行調整，圖像將會縮放。

來源

2017-08-15 20:17:47

css中斷而不是縮小

回答

相關問題