On my website, I am displaying two images that are hosted on another company's server. To ensure these images adjust with the size of the browser window, I have set their width and height as a percentage relative to the body.
However, the issue arises when these images are of different sizes, and I want them all to appear uniform. While it's simple to resize images with known dimensions to match each other, how can you maintain a consistent ratio with scalable dimensions?
I believe some JavaScript functionality is needed to achieve this effect. Below is the CSS code I am currently using:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.image {
width: 40%;
height: 40%;
margin: 1%;
}