使用內嵌塊屬性調整大小的響應式圖像

Question

我使用內聯塊創建圖像庫，每個圖像都有自己的div和寬度。當我調整頁面大小時，出現問題，圖像調整爲屏幕寬度，這很好，但是當我下降到大約400px（移動區域）時，圖像變得非常小。

無論屏幕寬度如何，我如何確保圖像保持良好的尺寸？

* { 
 
    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

您可以使用媒體查詢和設置的300像素的寬度（或任何你喜歡）

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

     } 
} 

筆here

另請參閱https://css-tricks.com/snippets/css/media-queries-for-standard-devices/爲各種移動維度

Answer 2

給position:relative到父DIV和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> 

這可能會解決你的問題。