What am I missing to stop my images from smashing down when resized?

Question

I got 3 (soon to be 5) pictures next to each other. When I resize the browser, the images go to this little tiny 1px x 1px size. How can i prevent that from happening? I feel like this should be pretty simple but i don't know what to change..

HTML:

<div class="inUseDescription">
    <p style="font-size: 24px;">text text text text text text</p>
<div class="images">
    <img src="image.jpg" width="170" height="150">
</div>
<div class="images">
    <img src="image.jpg" width="170" height="150">
</div>
<div class="images">
    <img src="image.jpg" width="170" height="150">
</div>
</div>

CSS:

.inUseDescription {
    padding: 65px;
    display: inline-block;
    max-width: 62%;
    color: white;
}

.images {
    float: left;
    width: 22%;
    padding: 10px;
}

Answer 1

Firstly, putting a div tag around each image is not at all wise.

<section class="section-photos">
            <ul class="photos-showcase clearfix">
                <li>
                    <figure class="photo-p">
                        <img src="img/1.jpg" alt="Disaster-Resistant House" width="800px" height="600px">
                    </figure>
                </li>
                <li>
                    <figure class="photo-p">
                        <img src="img/2.jpg" alt="Man facing disasters" width="800px" height="600px">
                    </figure>
                </li>
                <li>
                    <figure class="photo-p">
                        <img src="img/3.jpg" alt="House flooded" width="800px" height="600px">
                    </figure>
                </li>
            </ul>
            <ul class="photos-showcase clearfix">
                <li>
                    <figure class="photo-p">
                        <img src="img/5.jpg" alt="Floods" width="800px" height="600px">
                    </figure>
                </li>
                <li>
                    <figure class="photo-p">
                        <img src="img/6.jpg" alt="Hurricane" width="800px" height="600px">
                    </figure>
                </li>
                <li>
                    <figure class="photo-p">
                        <img src="img/7.jpg" alt="Tsunami approaching city" width="800px" height="600px">
                    </figure>
                </li>
            </ul>
        </section>

This is what I did in a website I made to make 2 rows of 3 photographs each.

.photos-showcase{ 
    list-style: none;
    width: 100%;
}

.photos-showcase li {
    display: block;
    float: left;
    width: 33.33%;
}
.photo-p {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #000;
}

.photo-p img {
    opacity: 0.7;
    width: 100%;
    height: auto;
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

This code beautifully makes sure the images always look good. The holder is of 100% width, but the images controlled using the list tag are only 33.33% that is 1/3. This makes all the images settle really well. One thing to note is the images should preferably be of all the same size to control well.

The code I have above also creates a depth effect when the image is hovered on. This is the best image-gallery example.

So my advice, instead of a div use list and if you want rows use ul.

Answer 2

Add minimum width for .images

.images {
  float: left;
  width: 22%;
  padding: 10px;
   min-width: 170px;
}

Answer 3

Remove inline width and height also give img tag 100% width and just maintain the width of image container that is div.images

 /*For three images*/
 .images{
    width:33.3%
 }
.images img{
    width:100%;
 }