How can I make div container with 3 images auto resizable? - html

Question

I am trying to achieve similar effect as is on this page: http://ketrawars.com
When you try to resize a browser window, all images resize along with it. I can get that working if my div contains one image to which I set width 100%. However, I have a problem when I need to put 3 images one next to another.
My code:
<div class="content">
<img src="images/main_01.png" alt="" />
</div>
<div class="content">
<img src="images/main_02.png" alt="" />
<img src="images/main_03.png" alt="" />
<img src="images/main_04.png" alt="" />
</div>
CSS:
.content {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: relative;
top: 0;
left: 0;
}
This is what it does:
And this is what is desired:
With the option to write text on the middle image (second one).

Answer 1

If you have three equally sized images, then set each of their widths to 32%:
.content img {
width:32%;
}
img elements are displayed as inline, by default. This means that the browser will add inline space between them, causing line breaks- you must subtract a percentage or two to compensate for this space.
I recommend displaying the images as blocks and then floating them to remove the inline space.
.content img {
display:block;
margin:0;
padding:0;
float:left;
width:33%;
}
If your images aren't equally sized, simply set their percentages so that all of the elements' widths add to 100.
Another good way to ensure that things will resize with the screen to use viewport units: vw and vh. They're defined as 1/100 the width and height of the viewport, respectively. Only Gecko based browsers will update them dynamically, however.
Codepen