Question

我今天在这里阅读了很多问题，希望无可救药地回答我的问题，所以我希望有人可以帮助我。

我正在努力将我的网站发展为响应式网页设计，并且我对图像有疑问。

问题：

我正在尝试从我的css加载标记为背景图像的图像，但由于容器中没有内容我正在加载它们，将高度设置为auto将导致没有图片，因为容器在技术上处于0没有任何内容。我需要将高度设置为自动，因为我需要将图像与网页一起缩放，以便它在没有大的空白空间的情况下保持成比例。

我明白要有我的背景图像比例，我必须将我的CSS设置为：

background: url(../images/image.jpg);
background-repeat: no-repeat;
height: auto;
width: 100%;

同样，这对我不起作用的原因是因为我希望将背景图像用作实际图像而不包含任何内容。由于没有内容，图像将不会显示。我想知道的是，如果有办法绕过这个问题。

我选择通过css加载图片的原因是因为我希望能够根据查看器设备（桌面，移动设备）加载特定图像的多个版本（按特定设备大小缩放的小到大文件大小）手机，平板电脑等）。

为了涵盖所有理由，我想提一下，我在html中使用了img标签，并通过css对不同设备进行了重新缩放。但是，如果可能的话，我仍然希望通过css加载图像，因为它允许我为不同的设备大小加载不同的文件大小，以增强移动设备的用户体验。如果有其他方法可以做到这一点，请告知。我花了26个工作小时，所以任何帮助将不胜感激。

编辑：

我已经开始使用测试模板来保持编码简单，这样每个人都可以看到我正在使用的内容，并且可能有助于诊断它无法正常工作的原因。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<script type="text/javascript" src="js/jquery.js"></script>

<link href="css/test.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/print.css" rel="stylesheet" type="text/css" media="print">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" content="cache" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="keywords" content="Enter Keywords" />
<meta name="description" content="Description Here" />

<link rel="shortcut icon" href="/s.ico" >



<meta id="view" name="viewport" content="width=device-width, initial-scale=1.0" />

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <link rel="stylesheet" type="text/css" href="includes/stylesheet_ie.css" />
<![endif]-->


</head>

<body>

    <div class="page">

        <div class="page_content">

                <div class="contentmain"></div>

        </div>
    </div>
</body>
</html>
</body>


</html>

我的CSS：

/* This stylesheet was designed and developed by Chris Converse, Codify Design Studio */

@charset "UTF-8";

/* Text Formatting */

body {
font-family: Arial;
font-size: 12px;
margin: 0px;
padding: 20px;
color: #555;
background: url(../images/back.jpg)
}


.page { font-size: 1em; background-color: #FFF; }

h1 { font-size: 2em; color: #9e472a; margin: 0px 0px .5em 0px; font-weight: normal; }
h2 { font-size: 1.6em; color: #9e472a; margin: 0px 0px .5em 0px; }
h3 { font-size: 1.25em; color: #9e472a; margin: 0em 0px .25em 0px; }
p { margin: 0px 0px 1em 0px; font-size: 1em; }
li { margin: 0px 0px 10px 0px; }
a img { border: none; }
a { color: #f52d1b; }
a:hover { color: #00a2ed; }




/* Layout */

.page { position: relative; margin: 0px auto 0px auto; max-width: 980px; }


.page .page_content { background-color: #fff; padding: 1px 0px 1px 0px; }

.page .page_content .page_content_container_main { width: 100%; float: left; margin:     0px; padding: 0px;  }


.page .page_content .content {
margin: 15px 20px 20px 20px;
padding: 0px;

}


.page .page_content .contentmain {


background: url(../images/mimg-l.jpg);
background-repeat: no-repeat;
height: auto;
width: 100%;
background-size: 100% 100% contain;

我想要实现的一个例子可以在www.dreamcreationstudios.com/test2.html找到。这是通过img标签完成的。我希望能够创建相同的效果，除了通过css加载图像，以便我可以加载各种屏幕尺寸的原始图像的裁剪版本。谢谢。

Answer 1

这可以通过在div上使用背景图像应用填充底部来完成，但您必须首先知道图像的纵横比。

.page .page_content .contentmain {
    background: url(../images/mimg-l.jpg);
    background-repeat: no-repeat;
    height: 0; //Make the div 0px high
    padding-bottom: 75%; //Adjust this value to match the image dimensions
    background-size: 100% 100% contain;
}

Answer 2

您可以为内容容器设置最小高度，以便在没有内容时容器不会折叠到高度0：min-height对您有效。

或者，您可以在已经定义高度的父元素上设置背景图像。

p / s：如果你不想要丑陋的空格，因为背景无法覆盖整个容器，那么你应该使用background-size: cover。您将保留图像的纵横比，浏览器将相应地缩放背景图像，使其最短轴将伸展到完全覆盖容器所需的范围。

Answer 3

以反应灵敏的方式做一大堆黑客攻击。这不是Dreamweaver的错。默认情况下，浏览器会查看您的代码并检查是否有任何空白元素没有任何子元素或者自身定义了宽度和高度。你已经定义了它的宽度，但不幸的是它没有得到这个容器的任何高度。最好和最快的方法是定义其background-size属性，不要担心容器的高度。

background: url(../images/image.jpg);
background-repeat: no-repeat;
height: auto;
width: 100%;
background-size: 100% 100%; // example, you can change it.

它可以在所有设备上完美运行。

Dreamweaver：背景图像设置为高度：auto将不显示任何内容

3 个答案: