0

ページの中央に配置した画像をレスポンシブにしようとしています(位置を保持しながらブラウザのサイズを変更するなど)。

CSS に以下を追加する一般的な方法を含め、多数の方法 (HTML と CSS のみ) を試しました。 

max-width: 100%;
height: auto;
width: auto\9; /* ie8 */

ただし、これは Chrome または Safari では機能していないようです。

誰かが私を正しい方向に向けることができますか? ありがとうございました。

私自身のコードは以下のとおりです。

<div id="contentbackground">
<div id="pagecontent">
<a href="about.html">
<img src="images/frontbanner.png" alt="Click to enter" title="Click to enter" >
</a>    
</div>
</div>

そして私のCSS：

#contentbackground {
    background: url("../images/frontcontent.jpg");
    width: 100%;
    min-height: 100%;
}

#pagecontent {
    margin: 0 auto;
    width: 960px;
    padding-top: 117px;
}

#pagecontent img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */

}
4

2 に答える 2

1

1.)開始時に a を定義するだけmax-widthでうまくいくはずです。

img {
    max-width:98%;
}

コードをクリーンアップして、セレクターをイメージに直接定義してみてください。デモ。

あなたの特定のケースでは、以下のようにクリーンアップすることから始めます：

  <img src="images/frontbanner.png" class="respondme" alt="Click to enter" title="Click to enter" >

.respondme { 
  max-width: 98%;
}

#pagecontent {
    margin: 0 auto;
    width: 960px;
    padding-top: 117px;
    background: url('..coolimage.jpg'); // why do you have two wrappers, delete contentbackground entirely and merge here?
    position:relative; // adding this actually makes it a wrapper
}

2.)前景画像のみの場合。私はbootstrapを使用することを好みます。

例：

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">

クラスを追加するだけ.img-responsiveで完了です。デモ。

3.)背景画像の場合:

background-size: 100%;
于 2015-07-20T18:56:26.023 に答える