11

レスポンシブ Web デザインは、画像を除くほとんどの html 要素でうまく機能します。ビューポートのサイズを変更する場合、親要素の幅と高さが正しく適用されるため、画像のサイズ変更率を使用することはできません。画像の固定幅と高さを設定する必要があります...または何か不足していますか?

では、コンテナー要素/親がネイティブの幅よりも大きく伸び、ネイティブの幅よりも小さくなるような画像を含むレスポンシブ デザインを正確に行うにはどうすればよいでしょうか?

ありがとうございました

4

3 に答える 3

13

レスポンシブ デザインで行われることは、画像やその他の要素の css でこれを設定することです。

img, embed, object, video {
max-width:100%;
    height:auto;
}

次に、html では、イメージはコンテナーのサイズを占めるだけです。

画像サイズ自体を設定するのではなく、画像自体を拡大/縮小させます。

于 2012-08-20T20:48:55.877 に答える
2

まあ-あなたは書くことができます： .selector img{width: 100%; height: auto;} 次に、それが含まれるdivのサイズを使用して、スケールを決定します。または、画像を背景として設定し、同様の方法を使用して、background-size: cover をいじることもできます。私はjsfiddleを作ります...

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}
于 2012-08-20T20:49:53.540 に答える
0

私が自分のサイトで行ったことは次のとおりです。

ページのもの....

div class=picr>

img src="/Images/Home/MountainPine.jpg" alt="Mountain Pine" id="mountainpine" >

<p>Caption about mountain pine</p>

/div>

次にCSSで

pic, pic6 {
    float: left;
    }

...

.pic, .picr {
    width: 37%;
    }

#content  img {
    width: 100% ;
    }

したがって、div クラスのスタイルが設定され、画像がそれを埋めるように設定されます。div を使用することで、スタイルも設定できます

.pic クラス内で、本文と区別できるようにします。

于 2015-01-04T14:18:39.157 に答える