Question

我研究了这个并且只发现了一个JavaScript解决方案，所以想知道是否有人知道CSS解决方案是否可行......

以下是代码段：

HTML

<div id="container">
        This is a small amount of text to appear over the stretched 
        background image, but I want to be able to see the entire image.
 </div>

CSS：

div#container 
{
        background: url('images/bigImage.png') no-repeat 0 0;
        background-size: 100%; /* makes the image stretch (vertically and horizontally) to the width of the device, so I've no idea what height the background image will be rendered at.*/
}

我可以使用任何CSS，因此背景图像覆盖整个div，整个图像可见吗？

提前致谢。

Answer 1

如前所述，使用CSS和background-image无法做到这一点。还有背景大小：IE8及更低版本不支持封面（从阅读你的评论我会假设你想拥有流畅（可扩展）的图像，同时保持宽高比？）

如果是这样，您可以使用常规img元素来实现此目的：

<style type="text/css">
div#container {
    position    : absolute;
    top         : 0;
    left        : 0;
    overflow    : hidden;
    width       : 100%;
    height      : 100%;
}

div#container img {
    position : absolute;
    width    : 100%;
    top      : 0;
    z-index  : -1;
}
</style>

<div id="container">
    <img src="http://img.gawkerassets.com/img/18cxbtdr4fexmjpg/original.jpg">
    This is a small amount of text to appear over the stretched
    background image, but I want to be able to see the entire image.
</div>

编辑 - 这是一个jsfiddle来展示它是如何工作的：http://jsfiddle.net/Xfxar/

Answer 2

如果要将div拉伸到图像大小，请使用

背景尺寸：盖;

如果要将图像缩放到div大小，请使用

背景尺寸：含有

Answer 3

据我所知，您无法在CSS或JS中检测背景图像的高度，因此，您无法将DIV渲染到此未知高度。

如果你正在使用PHP，那很简单：

<?php
$myURL = "http://i.imgur.com/AiAeQyU.gif";
$myImage = getimagesize($myURL);
?>

<div 
style="
background: url('<?php echo $myURL; ?>') 0 0 no-repeat; 
width: <?php echo $myImage[0] . 'px'; ?>; 
height: <?php echo $myImage[1] . 'px'; ?>
">
<p>Your content</p>
</div>

希望有所帮助。

Answer 4

如果我理解你的要求，你可以在div上使用CSS规则宽度：100％和高度：100％来占用父div的剩余空间。看起来您正在尝试将背景图像拉伸到设备的大小，并且已经在执行此操作：通常，如果您希望DIV占用整个空间，则可以使用CSS中的百分比。我相信如果你将背景图像div设置为页面的100％，以及文本div，你应该用背景填充整个页面。

是否可以使用CSS来调整容器的大小，使其与背景图像一样高？

4 个答案: