88

コードを携帯電話やタブレットのサイズに縮小すると、すべてのテキスト、リンク、ソーシャル アイコンがそれに応じて拡大縮小されます。

しかし、そうではない唯一のものは、身体の中の私のイメージです。これは段落タグでラップされています...そうは言っても、画像をレスポンシブにする簡単な方法はありますか?

本文に画像を表示するために使用したコードは次のとおりです。

<body>
    <center>
        <p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
    </center>
</body>
4

12 に答える 12

121

あなたはやってみることができます

<p>
  <a href="MY WEBSITE LINK" target="_blank">
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
  </a>
</p>

流動的なレイアウトの場合、これにより画像がスケーリングされます。

レスポンシブ (レイアウトがウィンドウのサイズに反応することを意味します) の場合、画像にクラスを追加し@media、CSS でクエリを使用して画像の幅を変更できます。

画像の高さを変更すると、比率が乱れることに注意してください。

于 2013-03-17T08:04:15.577 に答える
57

幅: 100% より広い範囲で表示すると壊れます。

以下は Bootstrap のimg-fluid.

max-width: 100%; 
display: block; 
height: auto;
于 2014-08-29T07:59:09.563 に答える
26

また、HTML ファイルとは別のファイルですべての CSS プロパティを使用することをお勧めします。これにより、コードをより適切に整理できます。

したがって、img をレスポンシブにするには、次のようにします。

まず、HTML ファイルでor属性<img>を使用してタグに名前を付けます。classid

<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">

次に、CSS ファイルを変更してレスポンシブにします。

.responsive-image {
  height: auto;
  width: 100%;
}
于 2013-12-09T15:34:27.143 に答える
7

Web サイト上のすべての画像をレスポンシブにするには、インライン HTML を正しいマークアップから変更しないでくださいwidth:100%。すべてのブラウザーで機能するとは限らず、Firefox で問題が発生する可能性があります。通常の方法で Web サイトに画像を配置したい場合:

<img src="image.jpg" width="1200px" height="600px" />

次に CSS に、画像の最大幅が 100% で、高さが auto に設定されていることを追加します。

img {
    max-width: 100%;
    height: auto;
}

そうすれば、コードはすべてのブラウザーで機能します。また、画像の実際の画像サイズをインライン HTML にコード化する必要があるカスタム CMS クライアント (つまり、Cushy CMS) でも動作します。最大幅が 100% で、高さが auto に設定されている CSS ファイル。そうしないheight: autoと、画像が適切に拡大縮小されません。

于 2015-05-26T19:00:18.020 に答える
5

<img>タグの使用が制限されている場合:

、およびを使用して、または選択した<div> その他の要素を設定する方がはるかに簡単であることがわかりました。background-imagewidth: 100%background-size: 100%

レスポンシブ イメージのすべてがこれで終わりというわけではありませんが、それは始まりです。また、 をいじってみてbackground-size: coverくださいbackground-position: center。

CSS:

.image-container{
  height: 100%; /* It doesn't have to be '%'. It can also use 'px'. */
  width: 100%;
  margin: 0 auto;
  padding: 0;

  background-image: url(../img/exampleImage.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
}

HTML:

<div class="image-container"></div>
于 2015-06-20T20:44:31.940 に答える
3

画像をレスポンシブにするには、次を使用します。

CSS

.responsive-image {
        width: 950px;//Any width you want to set the image to.
        max-width: 100%;
        height: auto;
}

HTML

<img class="responsive-image" src="IMAGE URL">
于 2015-03-31T13:39:12.137 に答える
2

画像の高さまたは幅を %100 に設定します。

スタック オーバーフローの質問には、「div」コンテナーに合わせて画像を自動サイズ変更するにはどうすればよいですか? .

于 2013-03-17T08:06:44.703 に答える
1

Bootstrap を使用して、画像を簡単に処理できます。class img-responsive を使用すれば完了です。

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
于 2015-08-06T21:10:20.937 に答える