CSS - 中心圖像在任何時候

我想知道如何在任何時候都可以垂直和水平放置圖像。

目前，當我拉伸它時，它似乎從左上角延伸，是否有一種方法可以使它始終處於中心位置。

我已經搜索了網頁，並嘗試了各種各樣的東西，但似乎無法讓它工作。

這是我的html：

<div class="container"></div>

這裏是我的CSS：

.container { 
    width: 100%; 
    height: 75vh; 
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
}

任何幫助或建議表示讚賞，感謝你提前。

編輯你可以看到，當我伸出了瀏覽器，它似乎是從左側伸展，我希望能夠有圖片中心，以便從四面八方延伸同樣*

來源

2016-06-10 danjones_mcr

我得到了解決..！

這裏是你的HTML文件：

<div class="container"></div>

CSS文件：

.container { 
width: 100%; 
height: 75vh; 
position: absolute; 
margin: auto; 
background-image: url("http://i.stack.imgur.com/2OrtT.jpg"); 
background-size: cover; 
background-repeat: no-repeat; 
background-position: 50% 50%; 
top: 0; 
left: 0;}

這裏工作demo

來源

2016-06-10 11:38:42

大加讚賞。 –

其實你並不需要那麼多的CSS：封面將覆蓋頂部/左邊等位置和重複：你可以達到完全相同的效果，像這樣https://jsfiddle.net/RachGal/7vmy2jww/（由方式@ DJONES不是'居中'） –

雅。你是對的@RachelGallen –

background-position: center將使圖像在垂直和水平中心對齊。

檢查下面的代碼片段：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}

<div class="container"></div>

來源

2016-06-10 11:27:06 Pugazh

.container { 
 
    width: 100%; 
 
    height: 75vh; 
 
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size:auto; 
 
}

<div class="container"></div>

來源

2016-06-10 11:41:13 Saika

HTML：

<div class="container"></div>

CSS：

.container{width: 100%;height: 75vh;position: absolute;margin: auto;background-image: url("http://i.stack.imgur.com/2OrtT.jpg");background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;top: 0;left: 0;}

來源

2016-06-15 06:03:16 John

CSS - 中心圖像在任何時候

回答

相關問題