Responsive image resizing with inline-block property - css

Question

I'm using inline-block to create an image gallery, with each image having its own div and width. I'm having a problem when I resize the page, the images adjust to the screen width, which is good, but by the time I get down to around 400px (the mobile area), the images become extremely too small.
How can I ensure that the images maintain a good size regardless of the screen width?
* {
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

You can use media queries and set a width of 300px (or whatever you prefer)
#media screen and (min-width:320px) and (max-width: 480px) {
section.portfolio .col {
width:300px;
}
}
pen is here
Also refer to https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ for various mobile dimension

Answer 2

Give position:relative to your parent div, and position:absolute to child element, use code like:
<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>
This might solve your problem.