web-dev-qa-db-ja.com

画像をレスポンシブにする - 最も簡単な方法

私は自分のコードがレスポンシブであることに気づいた、それは私が電話やタブレットのサイズにそれを縮小するならば - テキスト、リンク、そしてソーシャルアイコンの全てはそれに応じて拡大縮小する。

しかし、唯一のことは私の体の中のイメージです。これは、段落タグで囲まれています...ということで、画像をレスポンシブにする簡単な方法はありますか。

これが、私のイメージをボディに表示するために使用したコードです。

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

やってみることができます

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

流動的なレイアウトの場合、これはあなたのイメージを拡大縮小します。

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

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

104
Nick Ginanto

幅：あなたがより広い範囲で見るとき、100％はそれを壊します。

以下はBootstrapのimg-sensitiveです。

max-width: 100%; 
display:block; 
height: auto;
43
user706001

また、すべてのCSSプロパティをHTMLファイルとは異なるファイルで使用することをお勧めします。そうすることで、コードを整理しやすくすることができます。

それであなたのimgが反応するようにするために、私はそうするでしょう：

まず、HTMLファイルのclassまたはid属性を使用して<img>タグに名前を付けます。

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

それから、私のCSSファイルで、私はそれが敏感になるように変更を加えるでしょう：

.responsive-image {
  height: auto;
  width: 100%;
}
22
javidazac

私はこの方法を使って、ロゴをモバイル機器にも敏感に反応させることができます。ロゴは自動的にサイズ変更されます。

HTML

<div id="logo_wrapper">
  <a href="http://example.com" target="_blank">
    <img src="http://example.com/image.jpg" border="0" alt="logo" />
  </a>
</div>

CSS

#logo_wrapper img {
  max-width: 100%;
  height: auto;
}
5
Sumith Harshan

width:100%がすべてのブラウザで機能せずFirefoxで問題を引き起こすので、あなたのウェブサイト上のすべての画像をレスポンシブにするためにあなたのインラインHTMLを正しいマークアップから変えないでください。あなたはあなたがあなたのウェブサイトにあなたのイメージを通常どのようにすべきかを載せたいと思っています。

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

そして、CSSに、すべての画像の最大幅が100％、高さが自動に設定されていることを追加します。

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

そのようにあなたのコードはすべてのブラウザで動作します。それはまた、実際の画像サイズをインラインHTMLにコード化することを画像に要求するカスタムCMSクライアント（すなわちCushy CMS）でも動作します。最大幅が100％、高さが自動に設定されているCSSファイル。 height: autoを忘れないでください。画像が適切に拡大縮小されません。

5
OB7

私はいつもこれを使っています

imgクラスとmax-widthプロパティをカスタマイズできます。

img{
    width: 100%;
    max-width: 800px;
}

max-widthは重要です。さもなければあなたのイメージはデスクトップのためにあまりにも拡大縮小するでしょう。デフォルトではautoモードなので、heightプロパティに入力する必要はありません。

4
Abhishek Goel

<img>タグの使用に制約されている場合：

<div>またはその他の任意の要素をbackground-image、width: 100%およびbackground-size: 100%。

これは、レスポンシブイメージのすべてend allではありませんが、開始点です。また、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%;
}

HMTL：

<div class="image-container"></div>
3
Beck

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

Stack Overflowに関する質問には他にもあります 'div'コンテナに合わせて画像を自動サイズ変更するにはどうすればよいですか？。

2
btevfik

画像をレスポンシブにするには、次のようにします。

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">
2
JacobG182

画像はこのように設定する必要があります

img { max-width: 100%; }
1
pixel 67

図のように、Bootstrapを使用して画像の煩わしさを解消してください。 img-sensitiveクラスを使用すれば完了です。

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

画像をレスポンシブにするためにCSSを追加する代わりに、異なる解像度の画像を追加します。異なる画面解像度はアプリケーションをより効率的にします。

モバイルブラウザは、デスクトップブラウザが必要とするのと同じ高解像度の画像を持つ必要はありません。

SASSを使用すると、メディアクエリーを使用して異なる解像度に異なるバージョンのイメージを使用するのは簡単です。

0
Gajendra Jena