How Do I Adjust Image Sizing To Stay Proportional

Question

I am completely new to creating a website using Wordpress but have realized that HTML coding seems to be easier than just dragging and dropping. I have done several things to address the issue however nothing has worked exactly how I'd like it to.

Basically what I'm looking to do is have one full-size image (same width as the justified paragraph above it). Below that single image, there would be a space and then there would be two images side by side with space in between. They would be half the width of the image above, and no matter how you scaled the web browser to be larger or smaller, it would keep the same proportions. Then I would have the same thing below with 3 images below.

Ideally, there would be an image thats 100% width, the next two below would be 50% each with space in between. The next three below would be 33%. All pictures would have even spacing in between. How can I do this?

Here are a couple of things I've tried that didn't work out:

1)

<p class="has-text-align-justify">
<img class="wp-image-460" style="width: NaNpx;" src="https://..." alt="">

<img class="wp-image-458" style="width: 387px;" src="..." alt=""> &nbsp;

<img class="wp-image-459" style="width: 387px;" src="..." alt="">

</p>

2)

<img src="https://..." style="float: left; width: 49%; margin-right: 1.0em; margin-bottom: 1.0em;">

<img src="https://..." style="float: left; width: 49%; float: right; margin-bottom: 1.0em;">

Answer 1

Ideally, there would be an image thats 100% width, the next two below would be 50% each with space in between. The next three below would be 33%. All pictures would have even spacing in between. How can I do this?

CSS Flexbox is the perfect tool to achieve what you're describing.

You can:

• create three containers, each with display: flex
• place one image in the first container, two in the second and three in the third
• give each image a flex value of flex: 1 0 30%

flex is a shorthand value, short for flex-grow, flex-shrink, flex-basis.

Here the instruction flex: 1 0 30% means:

• flex-grow priority of 1 - ie. grow when you don't fill the space
• flex-shrink priority of 0 - ie. do not shrink, no matter how much or how little space there is
• flex-basis of 30% - use 30% of your parent as your starting width, before growing or shrinking

Working Example:

.image-container-row {
  display: flex;
}

img {
  flex: 1 0 30%;
  height: 45px;
  margin: 6px;
  border: 1px solid red;
}

<div class="image-container">

<div class="image-container-row">
<img class="wp-image-455" alt="Image - 100%">
</div>

<div class="image-container-row">
<img class="wp-image-456" alt="Image - 50%">
<img class="wp-image-457" alt="Image - 50%">
</div>


<div class="image-container-row">
<img class="wp-image-458" alt="Image - 33%">
<img class="wp-image-459" alt="Image - 33%">
<img class="wp-image-460" alt="Image - 33%">
</div>

</div>

---

Follow-up exercises to practise flex:

Flexbox Froggy - a game for learning flexbox