Here is the concept I was referring to, you can see it in action by following this link
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with CSS Flexbox:</p>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
The provided code showcases a single row with three images aligned horizontally. Notably, when the screen size is adjusted, the sizes of the images adjust proportionally.
In my research on amp-html, I came across another example:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>AMP #0</title>
<link rel="canonical" href="amps.html" >
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.container {
display: flex;
flex-direction: row;
width: 450px;
height: 200px;
margin:auto;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<div class="container">
<amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n" layout=flex-item></amp-img>
<amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" layout=flex-item></amp-img>
<amp-img class="child-flex-default" src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n" layout=flex-item></amp-img>
</div>
</body>
</html>
However, with the amp-html code, resizing the screen does not impact the image sizes as desired.
I attempted adjusting the style like so :
<style amp-custom>
.container {
display: flex;
flex-direction: row;
max-width: 450px;
height: 200px;
/* Updated styling here */
margin:auto;
}
</style>
While adjusting the width worked well for resizing, attempting to adjust the height using max-height: 200px; resulted in all images disappearing from display. Deleting the height attribute yielded similar results.
This brings me to my question :
How can I modify the code to ensure both width and height of the images adjust appropriately when resizing the screen?