自动放大div，只是为了适应图像的背景自动

问题描述：

我想放置在某个div标记下的图像，但是当没有文本时，它不会显示，所以我怎么能强制div显示图像背景的整体大小？自动放大div，只是为了适应图像的背景自动

<html> 
    <head> 
     <title> This is an demo </title> 
     <style> 
      .board { 
       background: url('1.jpg') no-repeat; 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="outer"> 
      <div class="board">Pic</div> 
      <div class="board">Pic</div> 
      <div class="board">Pic</div> 
      <div class="board">Pic</div> 
     </div> 
    </body> 
</html>

我试过背景大小，它不会在所有的工作（套/含）

答

你必须相对于图像的尺寸固定<div>的尺寸。否则它不会显示。

东西与此类似

.board { 
    min-width: 300px; 
    min-height: 400px; 
    display: block; 
}

_注：

_{如果可能避免使用最小高度或最小宽度的。使用高度&宽度，而不是}

由于图像具有固定大小，因此最小高度解决了我的问题，谢谢！ – daisy

答

将 在您的股利和应当编制

我没有安静地得到它，那么我应该在哪里放置' '？ – daisy

....在其背景设置为图像 –

它不工作，在这种情况下，我从上面所取代'Pic'，以“＆NBSP”，但造成了图像，而较小的格... – daisy

答

我与min-width和min-height去。

因此，您将图像的宽度和高度分别设置为div的min-width和min-height。

将它们设置为min-width和min-height意味着您的div可以扩展更多以适应内容。缺点是div可能会比背景图片变大，这会导致背景水平和垂直重复（默认情况下，您可以使用background-repeat控制它）。

否则，如果您不关心扩展，您可以将固定的width和height设置为div。

答

有没有办法用CSS动态地做到这一点，可以测量服务器上的图像大小，并生成所需的CSS或客户端的JavaScript。

为什么它不能成为你的div内的标签？

这样你只有可以通过浏览器按照现行标准来测量？ – daisy

@ warl0ck不，但带有img标签的div不会是空的，如果你不把它的文字。 css不是动态的，也不是HTMl（主要）。这意味着任何 og背景都不能被“浏览器测量”，除非您使用javascript来完成它，并且让它可以相应地改变CSS。 – Jeger

自动放大div，只是为了适应图像的背景自动

相关推荐