私は今日ここでかなりの数の質問を読んで、うまくいけば私の質問に無駄に答えることができたので、ここの誰かが私を助けてくれることを願っています.
Web サイトをレスポンシブ Web デザインに進化させようとしていますが、画像に問題があります。
問題：
背景画像としてラベル付けされたCSSから画像を読み込もうとしていますが、それらを読み込んでいるコンテナにコンテンツがないため、高さを自動に設定すると、コンテナは技術的に0で何もないため、画像が表示されませんコンテンツ。高さを auto に設定する必要があるのは、画像をウェブページに合わせて拡大縮小して、大きな空の空白がなくても画像が比例するようにする必要があるためです。
背景画像のスケールがあることを理解しています。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を介して画像をロードすることを除いて、同じ効果を作成できるようにしたいと考えています。これにより、元の画像のトリミングされたバージョンをさまざまな画面サイズでロードできます。ありがとうございました。