CSSで画像を拡大/縮小する方法

Question

3つの画像があり、この画像の縮尺を変更する方法は、ブラウザのサイズを小さくする方法と同じです。私のブラウザを小さくするためにイメージを小さくする方法は？ 私はこれを試してみたが、それは動作しません：

HTML

<div class="main"> 
     <div class="submain"> 
     <div class="iner"> 
      <img src="img/sample1.png" alt="" /> 
     </div> 
     <div class="iner1"> 
      <img src="img/sample2.png" alt="" /> 
     </div> 
     <div class="iner2"> 
      <img src="img/sample3.png" alt="" /> 
     </div> 
     </div> 
    </div> 

CSS

.main{ 
    position:relative; 
    height: 500px; 
    width: 1000px; 
    background-color: #111210; 
} 


.iner img{ 
    position: absolute; 
    width: 600px; 
    height: 350px; 
    background-color: #34cb2f; 
    bottom: 0; 

    left:50%; 
    z-index: 5; 
    transform: translateX(-50%); -webkit-transform: translateX(-50%); 
} 

.iner1 img{ 
    position: absolute; 
    width: 600px; 
    height: 270px; 
    background-color: #34cb2f; 
    bottom: 0; 

    right: 5%; 
    transform: translateX(-50%); -webkit-transform: translateX(-50%); 
} 

.iner2 img{ 
    position: absolute; 
    width: 600px; 
    height: 270px; 
    background-color: #34cb2f; 
    bottom: 0; 

    left: 65%; 
    transform: translateX(-50%); -webkit-transform: translateX(-50%); 
} 

.submain{ 
    width: 800px; 
    height: 200px; 
    background-color: rgba(38, 118, 212, 0.51); 
} 

そして、これはスケール画像用である場合400ピクセル未満分幅：

@media screen and (min-width: 400px) { 
    .submain{ 
    width: 75%; 
    } 
} 

しかし、このメディアルールはうまくいかず、多分私は何か間違っています。理解してください。ありがとうございました！

Answer 1

メディアクエリーは機能するはずですが、imgの幅は固定されているため、オーバーフローしています。

imgsのパーセント幅も使用する必要があります。 またはの幅を高さに設定すると、もう一方の寸法は比例して縮尺されます。

Answer 2

あなたは幅未満400ピクセルは、その後、あなたは@media画面を変更する必要がある場合に、画像を拡大縮小したい場合は（最小幅：400ピクセル）画面と@mediaする（最大幅を：399px）

TIP：画像のスケールを設定する方法の1つは、img max-width：100％を設定することです。次に、ブラウザの幅を変更したときに画像を囲むdivが小さくなったり大きくなったりすると、画像はその画像と共に拡大縮小されます。ここで

はあなたを助けるかもしれない同様のポストです： Make an image responsive - simplest way

Answer 3

「正しい」解決策は、あなたのウェブサイトのコンテキストで大きく依存します。あなたはそれを達成するためにいくつかのアプローチを取ることができます。

あなたの画像の相対的な寸法（％、em、rem、vh、...のようなor one of the new units）を与えるだけです。これにより、周囲の要素（したがってブラウザ）のサイズに応じて自動的に拡大縮小されます。

また、あなたのレイアウトが実際にそれを必要としている場合を除き、1つのディメンション（幅または高さ）を定義することがよくあります。この方法で、ブラウザは画像のアスペクト比を自動的に保持します。

Answer 4

画像をdivクラスにbackgroundとして適用し、それに応じてbackground-sizeを使用して拡大/縮小します。

Answer 5

vhは、画像自体に含まれているか、含まれている要素に置かれていても、ビューポートの高さに応じて画像を拡大/縮小します。

しかし、まったく同じ幅では動作しません。あなたのイメージは比較的よくスケールされますが、非常にまれであると私は認めていますが、それはニッチに苦労します。

%はそれがあなたのページの本文またはそれぞれのdivあるかどうか、コンテナの相対的な割合に基づいて画像を拡大縮小します - お使いの場合には、.inerのことを。この問題は、.inerが.submainから継承し、.submainの割合が.mainであることに関連することになります。子育てとパーセンテージは決して最高のペアではありません。