Question

我正在尝试将图像放在某个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>

我尝试了背景大小，它根本不起作用（覆盖/包含）

Answer 1

您必须根据图片大小修正<div>的尺寸。否则它不会显示。

与此类似的东西

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

<子> 说明：

_{如果可能，请避免使用最小高度或最小宽度。使用身高＆amp;宽度改为}

Answer 2

我会选择min-width和min-height。

因此，您将图片的宽度和高度分别设置为div的{{1}}和min-width。

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

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

Answer 3

没有办法动态地使用CSS，可以在服务器上测量图像的大小并生成所需的css或在客户端使用javascript。

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

Answer 4

将 放入您的div中，它将起作用

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

4 个答案: