I have two side-by-side images in a page masthead. They have identical heights (here: 50 px). One image has a fixed width (here: 150px). The width of the second image (50-500px) depends on the actual page ( = graphic page title).
When the viewport width is reduced, the image dimensions should not changed, until image-2 abuts on image-1.
When the viewport width is further reduced, both images should scale down in unison (without changing aspect ratios), see attached picture.
Steps 1-3 are easy enough, e.g., with a table:
<div> <table class="masthead"> <tr> <td style="width: 16%"> <div class="center"> <img alt="logo" class="left" src="image-1.jpg" style="width:100%; max-height:50px "> </div> </td> <td style="width: auto"> <img class="center" src="image-2.jpg" style="max-height:52px; height:auto"> </td> </tr> </table> </div>
Step 4 is a different story. I have tried with tables, div, and combinations thereof. Without success. In most cases, only image-1 shrinks.
What is the trick???