Automatically Shrink Images (and Stay Inline) When Window Size Decreases

Question

I have three images vertically aligned inside of a div. When the browser shrinks the third image no longer fits within the div causing that image to drop down to the second line. I used auto and 100% width and height properties in CSS but it doesn't keep the images inline nor resize the image. Anyone know how to fix this?

<div class="media">
    <img class="media_image" src="source1_name">
    <p>Some text that overlays the image</p>                            
</div>
<div class="media">
    <img class="media_image" src="source2_name">    
    <p>Some text that overlays the image</p>                
</div>
<div class="media">
    <img class="media_image" src="source3_name">    
    <p>Some text that overlays the image</p>                        
</div>      

.media {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-left: 16px;
    }

 .media img {
    width: auto;
    height: auto;
    }

.media_image { 
    display: block; 
    }

score 0 · Answer 1 · answered Apr 11 '16 at 19:04

Try this:

.media {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 33,33%;
    margin-left: 16px;
    }

 .media img {
    width: 100%;
    height: auto;
    }

.media p {
   position: absolute;
   left: 0;
   bottom: 20px;
   }

It sets the element widths to one third of the parent (the body?) and the image widths to the full width of these three elements, which will both change when the parent container shrinks on smaller screens (given that is has for example 100% width)

Of the last rule, mainly the absolute position is important in order to overlay the images, the rest/the actual position is up to you.

Automatically Shrink Images (and Stay Inline) When Window Size Decreases

1 Answers1