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图像大小将不会改变

回答

相关问题