CSS圖像大小將不會改變

-1

嘿傢伙所以我的問題很簡單，只是我不知道如何解決它。CSS圖像大小將不會改變

我基本上試圖縮放這個圖像，以適應div寬度，但它沒有工作出於某種原因。寬度和高度將保持其原來的大小因某種原因..

<body> 
     <div id="header"> 
      <div> 
       <ul id="mymenu"> 
        <li><a href="text">homepage</a></li> 
        <li><a href="text">blog</a></li> 
        <li><a href="text">photos</a></li> 
        <li><a href="text">about</a></li> 
        <li><a href="text">links</a></li> 
        <li><a href="text">contact</a></li> 
       </ul> 
      </div> 

      <div id="bgfix"> <!-- here is the image --> 

      </div> 
     </div> 
    </body>

這就是它的HTML，它應當採取的MyMenu大小，使畫面是它的寬度爲100％。

CSS代碼

#bgfix { 
    margin-top: 20px; 
    background: url("../img/home_bg.jpg"); 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 250px; 

}

來源

2016-06-13 Tomislav Tomi Nikolic

使用此：

#bgfix { 
    margin-top: 20px; 
    background: url("../img/home_bg.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
}

這將使背景圖像其父的整個寬度，並自動調整高度，以保持的正確比例圖片。或者，您可以使用background-size: cover，它將填充容器，但會切斷一些圖像或background-size: contain;，這會將圖像縮放以適合容器，但留出一點空間。在所有情況下，您可能需要添加background-position: center center;以垂直和水平居中圖像。

來源

2016-06-13 14:37:34 Johannes

謝謝，但我有1個更多的問題，當我這樣做時，我希望沒有什麼可以在div上。在我的情況下，如果我將任何文本放置在圖像下方的不同div中，它將出現在圖像上或其上方 –

一個div的背景圖像不會自動擴展到覆蓋整個股利。

如果您想要縮放背景，可以添加background-size:cover;或background-size:contain;（取決於您希望的樣子）。

瞭解更多關於該物業位置：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

來源

2016-06-13 14:28:28 Andreyu

老實說，那div將是空的，我只需要設置圖像不重複，並適當調整大小，我看到只有BG圖像可以有沒有重複，有沒有什麼辦法，我可以做到這一點，沒有div但仍然保持不重複，例如 –

標記不會重複任何操作，它只會顯示一次圖像。爲了使它與包含div相同的大小添加'寬度：100％;高度：100％'。您還需要設置z-index以使其成爲背景。檢查這個小提琴的例子：https：//jsfiddle.net/jq3qfqot/1/ – Andreyu

嗯是啊與img標籤工作，還有1個更多的問題，基本上是文本或任何我放在bellow它不會正確顯示。它會出現在圖片 http://pastebin.com/B4s5cUMv –

CSS圖像大小將不會改變

回答

相關問題