Scaling down images with different widths in smaller parent div - html

Question

I'm trying to recreate a chat using images as the messages. The images are of different widths and are in a parent div with a fixed width of 500px. The images are however bigger than 500px, which means that if I scale them down with "max-width: 80%", they do scale down but all to the same width. How can I keep the different widths while scaling them down? Can I achieve that with flexbox? Or with table?
Edit: This is roughly what it should look like:
Here's the snippet of the situation:
.wrapper {
margin: 0 auto;
margin-top: 20px;
width: 500px;
}
.chat {
border: 2px solid #b7b7b7;
}
.chat .chat-header {
width: 496px;
margin-bottom: -2.5px;
position: relative;
}
.chat .chat-history {
padding: 2%;
overflow-y: scroll;
height: 700px;
overflow-x: hidden;
}
.message {
max-width: 80%;
height: auto;
padding: 2px;
}
.float-right {
float: right;
}
<div class="wrapper">
<div class="chat">
<div class="chat-header">
<img class="chat-header" src="https://via.placeholder.com/1280x212"/>
</div>
<div class="chat-history">
<div class="test">
<img class="message float-right" src="https://via.placeholder.com/736x143" width="736" height="143" />
</div>
<div class="test">
<img class="message" src="https://via.placeholder.com/530x384" width="530" height="384"/>
</div>
<div class="test">
<img class="message float-right" src="https://via.placeholder.com/591x140" width="591" height="140" />
</div>
<div class="test">
<img class="message" src="https://via.placeholder.com/546x152" width="546" height="152" />
</div>
<div class="test">
<img class="message float-right" src="https://via.placeholder.com/561x101" width="561" height="101" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/698x124" width="698" height="124" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/840x203" width="840" height="203" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/824x141" width="824" height="141" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/770x141" width="770" height="141" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/748x139" width="748" height="139" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/725x85" width="725" height="85" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/812x197" width="812" height="197" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/859x189" width="859" height="189" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/740x140" width="740" height="140" />
</div>
<div>
<img class="message float-right" src="https://via.placeholder.com/596x125" width="596" height="125" />
</div>
<div>
<img class="message" src="https://via.placeholder.com/857x109" width="857" height="109" />
</div>
</div>
</div>
</div>

Answer 1

Use several :nth-child(expr) presets with different max-width. expr should be some formula with n so you get repeated patterns of image scaling or some patterns that look random.
Example:
.message-container:nth-child(2n) .message {
max-width: 60%;
}
.message-container:nth-child(2n+1) .message {
max-width: 50%;
}
.message-container:nth-child(3n+2) .message {
max-width: 40%;
}
Set message-container class to divs inside chat-history or use .chat-history > div instead.
https://developer.mozilla.org/ru/docs/Web/CSS/:nth-child