Resize images automatically on window resize

Question

I am displaying a number of input type=image. The images display as I want them to in a larger window but when the window shrinks, like on a phone, the images/row changes but not the size of each image. I posted a similar question and was told to use display:inline-flex but when I try that in this case the layout in the larger window is not spaced as I want.

So I am trying to have all of the images shrink as the window size does but also keep the layout they are in - evenly spaced in rows.

And there is also a minor question of centering the color name. I used on the first one and it works. Is that the way to do it or can one of the classes be changed to do that?

jsfiddle

    .imgStr {display:inline-block;  }
    .imgInput {width:100px; max-width:100px;}
    img{border:solid 1px #9a9a9a; margin:10px;}
    .selected{ box-shadow:0px 12px 22px 1px #333 }

    .transition {
    -webkit-transform: scale(1.6); 
    -moz-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
    }
    #enlarge {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    }
    #enlarge { margin:0px; }   


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="imgStr shadow"><center><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350" / ><br / >Beige</center></div>

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350" / ><br / >Black</div>

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350" / ><br />Blue</div>

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350" / ><br / >Navy</div>

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350" / ><br / >Baby Blue</div>

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350" / ><br / >Chocolate</div>

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350" / ><br / >Dark Grey</div>

score 0 · Answer 1 · answered Dec 14 '16 at 00:30

As far as I understand, you want to have responsive images that grow and shrink related to the users window size.

I'm not sure there is an easy way to do this in normal css but Bootstrap (thankfully) has this built in!

<img src="foo.jpg" class="img-responsive">

simply add the "img-responsive" class to your image, it will become responsive & scale to the size of whatever parent element it's in.

Bootstrap responsive image documentation

score 0 · Accepted Answer · answered Dec 14 '16 at 00:34

For a CSS only solution, you're looking for @media-query (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries):

<style>
.your-image {
  transition: all 0.5s ease;
  width: 200px;
}

@media (max-width: 600px) {
  .your-image {
    width: 100px;
  }
}
</style>

This says "if the window is less than 600px width, images with the your-image class should have a different width".

IMO the CSS solution is pretty clean, but if you wanted to use Javascript, you could do something like:

function foo() {
   ...do your resizing here...
}

window.addEventListener('resize', foo);

Resize images automatically on window resize

2 Answers2