1
我今天在這裏閱讀了很多問題，希望能夠無效地回答我的問題，所以我希望這裏有人能幫助我。Dreamweaver：背景圖像設置在高度：自動將不顯示內容
我正在嘗試將我的網站發展爲響應式網頁設計，並且遇到圖像問題。
問題：
我試圖從標作爲背景圖像我的CSS加載圖像，但由於是在容器中沒有的內容，我在加載它們，以自動將導致設置高度不由於容器在技術上沒有任何內容，因此爲圖片。我需要將高度設置爲自動，因爲我需要圖像與網頁一起縮放，以便在沒有大的空白空間的情況下保持比例。
我知道有我的背景圖像比例，我將有我的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加載圖像，以便我可以加載各種屏幕尺寸的原始圖像的裁剪版本。謝謝。
'height：auto'只有在您有內容時纔會生效。沒有任何，元素將不會顯示任何高度。你必須明確設置元素的高度 – BenM 2013-02-26 09:16:20
根據我想要做的事情，你會建議如何實現它？基本上，我想要一個可以縮放到設備大小的圖像，並且同時能夠根據查看器的屏幕大小以多種尺寸加載圖像。 – 2013-02-26 10:05:57