1

我对此进行了研究，只找到了一个 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 并且整个图像都可见？

提前致谢。

4

4 回答 4

3

如前所述，使用 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/

于 2013-02-25T18:17:30.077 回答
2

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

背景尺寸：封面；

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

背景大小：包含；

于 2013-02-25T17:55:23.743 回答
1

据我所知，您无法检测 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>

希望有帮助。

于 2013-02-25T18:13:58.493 回答
0

如果我理解您的要求，您可以在 div 上使用 CSS 规则 width:100% 和 height:100% 来占用父 div 的剩余空间。似乎您正在尝试将背景图像拉伸到设备的大小，并且已经在这样做：通常，如果您希望 DIV 占据整个空间，则可以使用 CSS 中的百分比。我相信如果你在这种情况下将背景图像 div 设置为页面的 100%，以及文本 div，你应该用背景填充整个页面。

于 2013-02-25T17:52:37.750 回答