This is similar to How can I make all images of different height and width the same via CSS? except I am trying to make these sizes responsive and cannot set pixel values- I need percentages.
Basically almost every photo I am using is the same width and height, but a very small handful of them are taller, or wider. I have all these images displayed in circles, and the wide images fit nicely, but the tall images look like ovals.
I don't care about fixing the wide images really, since they fit into the circle, but I need to fix the tall images.
Some of the HTML (JavaScript -- Google Maps API InfoWindow)
for (i = 0; i < myList[infoId].numOfFUnits; i++) {
infoString = infoString + ("<a href=\"" + myList[infoId].fUnits[i].pageLink + "\"><img src=\"" +
myList[infoId].f[i].photo + "\" class=\"mPhoto\" alt=\"" + myList[infoId].fUnits[i].displayName + "\"></a>");
}
infoString = infoString + ("<br/><strong>Images<strong></div>");
var infoBox = new google.maps.InfoWindow({
content: infoString,
});
CSS
.mPhoto{
margin-top: 5px;
width: 30%;
height: auto;
border-radius: 50%;
border: 1px solid white;
}
- I can fix this by setting the max height to 188.09px (the width at full screen), but when I change the window size to anything smaller than that we have the same problem.
- I can't use
document.getElementsByClassName().style
to set max-height to whatever the width currently is because I'm using InfoWindows and the HTML is in the JavaScript file, not the HTML file - I tried setting them as background images, but this requires setting width and height with pixels, not percentages.
- Changing object-fit had no effect, although it appeared to at first.
Any ideas?