メディアクエリーを使わずにイメージタグイメージを応答してレイアウトを1つの画面にする方法

Question

メディアクエリーを使用せずにimgタグイメージのサイズを変更する方法はありますか。私はそれを探してすべての答えを試みたが、何も私のために働いた。私はWindowsシステムの画面を見ると通常の画面表示を見せます。通常の画面のラップトップやMacBook Proの13インチのスクロールで見ると、ウィンドウサイズをクロムで75％に減らすと1画面レイアウトに収まります。 私はフォントサイズを減らそうとしました。例えば、font-size：2vw;その正常に動作しますが、私はCSSを試してみました：

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

が動作しません。 レイアウトを1つの画面に作成し、画像タグのサイズを自動的に変更する方法やスクリプトはありませんか。例えば

：私はメディアが

Answer 1

ちょうど "100％の幅" を追加照会を使用する必要はありません

<img src="http://dummyimage.com/1200x400/000/fff" style="width:100%"/> 

あなたが探しているものは他にもあります。質問を編集してスクリーンショットを追加してください。

は

を更新し、これを試してみてください：

#images{ 
 
\t max-width:50%; 
 
\t border:1px solid; 
 
\t float:left 
 
} 
 
#images .image{ 
 
\t float:left; 
 
\t padding:10px; 
 
\t width:25%; 
 
\t -webkit-box-sizing:border-box; 
 
\t -moz-box-sizing:border-box; 
 
\t box-sizing:border-box;}

<div id="images"> 
 
\t <div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div> 
 
\t <div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div> 
 
\t <div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div> 
 
\t <div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div> 
 
</div>

はそれがあなたのために働く願っています。

Answer 2

は、メディアクエリのない画像が応答してください：

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

<img src="http://lorempixel.com/400/300" alt="">

をイメージ応答していないスクロールバーを作成するには：

html, body { height: 100%; margin: 0; padding: 0; } 
 

 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
}

<img src="http://lorempixel.com/400/300" alt="">

制約を持つ画像が応答してください：それは応答するように、imgタグには100％と高さの自動プロパティ：

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

<img src="http://lorempixel.com/400/300" alt="">

Answer 3

幅を追加してください。 例：

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