我今天在这里阅读了很多问题，希望无济于事地回答我的问题，所以我希望这里有人可以帮助我。
我正在尝试将我的网站发展为响应式网页设计，并且图像有问题。
问题：
我正在尝试从标记为背景图像的 css 中加载图像，但由于我正在加载它们的容器中没有内容，因此将高度设置为 auto 将导致没有图片，因为容器在技术上为 0 而没有任何内容。我需要将高度设置为自动，因为我需要图像与网页一起缩放，以便在没有大的空白区域的情况下保持比例。
我知道要有我的背景图像比例，我必须将我的 css 设置为：
background: url(../images/image.jpg);
background-repeat: no-repeat;
height: auto;
width: 100%;
同样，这对我不起作用的原因是因为我希望将背景图像用作没有任何内容的实际图像。由于没有内容，因此图像不会显示。我想知道是否有办法解决这个问题。
我选择通过 css 加载图像的原因是因为我希望能够基于查看者设备（台式机、手机、平板电脑）加载特定图像的多个版本（从小到大的文件大小按特定设备大小缩放） ， ETC）。
只是为了涵盖所有理由，我想提一下，我在 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 加载图像，以便我可以加载各种屏幕尺寸的原始图像的裁剪版本。谢谢你。