インラインブロックプロパティを使用したレスポンスイメージのサイズ変更

Question

インラインブロックを使用してイメージギャラリーを作成しています。各イメージにはdivとwidthがあります。ページのサイズを変更すると問題が発生します。画像は画面の幅に合わせて調整されますが、約400ピクセル（モバイルエリア）になると画像が極端に小さくなりすぎます。

画面の幅に関係なく、画像のサイズを維持するにはどうすればよいですか？

* { 
 
    box-sizing:border-box; 
 
} 
 

 
.container { 
 
    width:80%; 
 
} 
 

 
section.portfolio { 
 
    background: 
 
} 
 

 
section.portfolio .col { 
 
    background:; 
 
    width:23.3%; 
 
    padding:10px; 
 
    margin: 5%; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 

 
section.portfolio .col img { 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 

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

<section class="portfolio"> 
 
    <div class="container"> 
 
     <div class="col"> 
 
      <img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg"> 
 
     </div> 
 
     <div class="col"> 
 
      <img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg"> 
 
     </div> 
 
     <div class="col"> 
 
      <img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg"> 
 
     </div> 
 
    </div> 
 
</section>

Answer 1

@media screen and (min-width:320px) and (max-width: 480px) { 
    section.portfolio .col { 
     width:300px; 

     } 
} 

ペンはこれがなかった。また

Answer 2

あなたの親のdivにposition:relativeを与え、子要素にposition:absolute、のようなコードを使用：これはあなたの問題を解決する可能性があります

<div class="col" style="position:relative"> 

      <img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg" style="position:absolute"> 

    </div> 

。

あなたはメディアクエリを使用し、300ピクセル（またはものは何でもあなたが好む）の幅を設定することができ