在流線佈局中集中徽標並限制徽標的最大尺寸

我正在使用雅虎的pure.css佈局，並遇到一些小問題。我有一個標誌可以代替標題，我希望徽標也是流暢的（尺寸隨瀏覽器窗口的大小而變化）。在流線佈局中集中徽標並限制徽標的最大尺寸

我目前使用下列內容：

h1.logo{ 
    background-image: url('../images/LogoColor287x86.png'); 
    background-size: 100%; 
    text-align: center; 
    background-repeat: no-repeat; 
    width: 100%; 
    float: none; 
    padding-top: 29.8%; 
    height: 0; 
    text-indent: -9999px; 
}

這工作，但結果不是我想要的。上述CSS確保徽標占用可用的最大尺寸。但我想要有一個最大的尺寸和居中。說它應該是一個500px寬度的最大尺寸，即使可用的空間量（寬度）是1000px。

無論如何限制的比例。

來源

2015-04-22 Morpheus

使用'最大寬度：500px'並嘗試 –

標誌圖像開始重複和，而不是中心，整個容器轉移到左邊。 – Morpheus

你能提供一個小提琴 –

爲了使徽標中心使用屬性background-position: center center。

另見的jsfiddle：https://jsfiddle.net/Saiyam/7fzfoy43/2/

來源

2015-04-22 05:58:55

https://jsfiddle.net/7fzfoy43/仍然有它的左側。 – Morpheus

https://jsfiddle.net/Saiyam/7fzfoy43/1/ –

只需使用上面的鏈接來獲得所需的結果 –

如果我正確理解你的問題，你想一個背景圖像的最大尺寸，同時保持居中，正確縮放時更少的可用空間？

我用嵌套元素實現了這一點 - 一個定位相對位置，並獲取最大可用空間。定位絕對與定義的最大值，然後趁着嵌套元素

background-size: contain;

見JS提琴在這裏：http://jsfiddle.net/4bgcokux/2/

來源

2015-04-22 06:07:19

謝謝你的答案。我認爲其他divs正在影響中心化 https://i.imgur.com/shzKI7o.png div結構在這裏 – Morpheus

您可以發佈您的確切的HTML/CSS，以便我可以進一步幫助嗎？只要父母親相對，而孩子是絕對的，這應該能夠工作。 –

https://jsfiddle.net/6actyqq2/1/對不起。忘了上次 Pure.css - > http://yui.yahooapis.com/pure/0.6.0/pure.css – Morpheus

把你的標誌一個div內使用CSS text-align: -webkit-center;

HTML：

<div class="header"> 
<h1 class="logo"></h1> 
</div>

CSS：

.logo { 
    background-image: url('https://images.google.com/intl/en_ALL/images/srpr/logo11w.png'); 
    background-size:contain; 
    padding-top: 29.8%; 
    max-width: 50%; 
    background-repeat: no-repeat; 
} 
.header { 
    text-align: -webkit-center; 
    width:100%; 
}

希望它可以幫助你......

來源

2015-04-22 06:36:20

在流線佈局中集中徽標並限制徽標的最大尺寸

回答

相關問題