0

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.

Images with off sizes

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?

4
  • 1
    why not putting them as background image Commented Feb 7, 2018 at 20:19
  • I can't set the images in the CSS, it needs to be done when the InfoWindow is created and I need to be able to display all the images in neat rows. Commented Feb 7, 2018 at 20:26
  • you can use as background and include them as inline style Commented Feb 7, 2018 at 20:28
  • @TemaniAfif I just tried this, it doesn't work with percentages- I have to set pixel values and even when I do the images are now zoomed in really far. Commented Feb 7, 2018 at 22:43

4 Answers 4

0

You need to set a max-height on the images. That will stop the tall images from becoming ovals.

2
  • I tried this (wrote about it in the question), but it doesn't work when I need to change the window size. Commented Feb 7, 2018 at 20:29
  • So you need the height to become smaller when the width is smaller? If there are only preset widths you need to support, you can use media tags and adjust your max-height for mobile and tablet layouts.
    – Yathi
    Commented Feb 7, 2018 at 20:35
0

The problem is that in order to have responsive perfect circles, the width will need to be the same as the height when the screen resizes.

As far as I'm aware, the only way you can force that to be the case is by using JavaScript to increase the smaller value when the page gets bigger, and decrease the larger when it gets smaller.

This can be seen in the following very clunky example, which adjusts the size accordingly:

var width = $(window).width();
var height = $(window).height();

$(window).resize(function() {
  // Set the height and width variables on resize
  width = $(window).width();
  height = $(window).height();
  
  console.log(width);
  console.log(height);

  // Collect the images
  var images = document.getElementsByClassName('img');
  
  // Increased width
  if (width > $(window).width()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.width++;
    }
  }
  
  // Decreased width
  if (width < $(window).width()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.width--;
    }
  }

  // Increased height
  if (height > $(window).height()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.height++;
    }
  }
  
  // Decreased height
  if (height < $(window).height()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.height--;
    }
  }
});
.img {
  position: relative;
  float: left;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg'); width: 100px; height: 100px;"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg'); width: 100px; height: 100px;"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg'); width: 100px; height: 100px;"></div>

Note that this uses inline styles to set the initial width and height, because you cannot (easily) update the properties with JavaScript if they're set in the stylesheet.

While I'm sure the above can be achieved much more succinctly, this should hopefully achieve what you're looking for :)

You can see this in action by clicking 'Run Code Snippet' and then 'Full Page'. From here you can resize the page to see the images changing size, whilst still remaining perfectly circular.

Hope this helps!

2
  • I can't use document.getElementsByClassName or anything similar to it because the HTML I'm worried about is in the JavaScript file, not the HTML file. Commented Feb 7, 2018 at 20:42
  • @StarSweeper -- Even if your elements are generated dynamically, you can wait for onload or onready to target them. Commented Feb 7, 2018 at 20:53
0

How about object-fit: cover:

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Note that object-fit requires explicit declarations for width and height in order to work. Their values may also be relative units.

6
  • Okay, I don't know what the heck object-fit: cover is, but it worked!!!!!! There is an extra scroll bar now, which is weird, but all the images are circles!! Thank you so much!! Commented Feb 7, 2018 at 20:51
  • And it still resizes when the window changes, without me having to rewrite half my code! Commented Feb 7, 2018 at 20:52
  • Yup, it's a powerful property. Glad I could help :) Commented Feb 7, 2018 at 20:53
  • So, kind of embarasing, apparently object-fit didn't fix anything. I just forgot to delete the max-height: 188.09px line; The images must have been so small when I tried to resize the screen that I didn't notice the oval image was still an oval. Commented Feb 7, 2018 at 21:52
  • @StarSweeper Have you made sure to also set the width and height properties to 100% on the images? Commented Feb 8, 2018 at 22:19
0

The issue was I needed the width and height to be based off a percentage of something other than the actual image size. Setting the width and height each to 30% will be 30% of the image width and height (not helpful), and setting them to something like 200px worked, but had no responsive design.

As Gerardo BLANCO mentioned in a now deleted comment, using vh, or vw as units is an option (1 vh is equal to 1% of the height of the viewport, 1 vw is equal to 1% of the width of it). This works great, and an even more useful option is using vmin which is 1% of either the width or height of the viewport (whichever is smaller).

(Note: vmin does not work with some older browsers and is glitchy in edge.)

.mPhoto{
    margin-top: 5px;
    width: 30vmin;
    height: 30vmin;
    border-radius: 50%;
    border: 1px solid white;
}

This not only made my images all the same size, but now the circles change size when I resize the browser without me having to close and reopen the InfoWindow.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.