私は自分のウェブサイトにある背景画像を調整しようとしていますが、アイフォン、Nexusなどの小型携帯電話ではテストできません。私はこれをテストするためにChromeデベロッパーツールを使用しています。ここで フルページの背景画像が反応しません
はJsBinの抜粋です： http://jsbin.com/dacamemule/edit?output背景画像は、小さな携帯電話のためのそれはあまりにも巨大になるだろう1920×1080であるが、私はそれを768x432に設定した画像サイズでメディアクエリを使用してブレークポイントを作成しようとしましたが、なかったですまだ働いていない。デスクトップやレスポンシブビューであっても、その中のリンクが同じ場所に「張り付く」イメージマップになっているはずです。ビデオの青い点がその一例です。マップ全体に広がるドットが増えるはずです。
ありがとうございました。
画像に応答性を持たせたい場合は、img.bgからmin-width:1024pxのルールを削除するとよいでしょう。おそらくそれをmin-width: 100%; max-width: 100%; height: auto;と置き換えますか？
実際に画像を背景として使用する場合は、<img>タグを使用しないでください。 <body>または何らかのヘルパー（コンテナ）のbackgroundプロパティを使用し、background-sizeプロパティ（および必要な接頭辞）を使用します。コンセプトの
証明：
body {
background:white url("http://s33.postimg.org/loiuxh5wf/Fundo.png") no-repeat center center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
min-height:100vh;
margin: 0;
padding:0;
overflow-x: hidden;
font-family: sans-serif;
}
.someLinks {
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-ms-flex-align: stretch;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.someLinks>a {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 45%;
-ms-flex: 1 0 45%;
flex: 1 0 45%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
color: red;
text-decoration: none;
}
.someLinks>a:hover {
background-color: rgba(255,0,0,.35);
color: white;
}<div class="someLinks">
<a href="#" onclick="return false">link</a>
<a href="#" onclick="return false">link</a>
<a href="#" onclick="return false">link</a>
<a href="#" onclick="return false">link</a>
</div>これはあくまでも一例です。リンクを実際のリンクに置き換え、アクティブにしたい場合はonlickプロパティを削除します。
今のところ、あなたの望む結果は不明で、これはあなたの目的に合わないかもしれません。すべてのリソースを適切にリンクして、問題のMinimal, Complete, and Verifiable exampleを作成してください。現在、video.js,index.htmlおよびstyle.cssの内容はわかりません。あなたが上に重なっているイメージもそうです。
あなたの答えをありがとうございました。今はすべての画面に適応します。 タグを使用して背景画像を使用したかったのは、リンク付きの画像マップを作成することでした。画像が拡大縮小された場所であれば、新しい座標を計算するimageMapResizerプラグインを使用しました。 –
FabMon
画像のCSS上の位置が「固定」から「相対」に変更されました。
** 'position：relative;'はイメージを応答します**。それは非常に大胆な声明です。それを文書化していただけますか？そして、おそらくテスト？ –
お詫び申し上げます。私は間違った質問を読む。イメージがフィドルの背景になろうとしていないので、私はそれが背景イメージであることを認識しませんでした。あなたは正しいです、特定のディスプレイに要素を与えるだけでは反応しませんが、固定ディスプレイでは他の要素が正しく流れませんでした。相対位置が問題を修正します。私が彼がイメージをバックグラウンドにしたかったことがわかったら、私の答えは違っていたでしょう。申し訳ありません – Noah
jsFiddle.netにリンクしているときに**あなたのコードを掲示するというSOのルールを迂回しようとするのではなく、ちょうどあなたが質問されたようにしてください。無意味なテキストをコードとして強調表示することを選択しただけで、大きな赤い警告ボックスがあなたに求めたことを避けることができます。 – j08691
あなたのCSSに割り当てられた背景画像はありません –
コードが不明なのは残念です。私が帰ってくると、後ですべてのリソースを使ってフィドルを作ろうとします。 – FabMon