Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

Question

Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

Is there a way to ensure that all images maintain the same height and width using CSS percentages, rather than set pixel values? I'm working on displaying images in circles, where most are uniform in size but a few outliers distort the shape. The wide images fit properly, but the tall ones appear oval-shaped.

https://i.sstatic.net/GZry6.png

I'm not concerned about adjusting the wide images as they already fit within the circle. However, the issue lies with the taller images that need to be corrected.

A snippet 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;
}

One solution I've tried is setting max-height to 188.09px (equal to full screen width), but this causes issues when the window is resized smaller.
Since the HTML is within JavaScript, I can't use
```
document.getElementsByClassName().style
```
to adjust the max-height based on current width.
Attempts to use background images require specific pixel dimensions instead of percentages.
Changing object-fit didn't have the desired effect, despite initial appearances.

Do you have any suggestions?

javascript html css image google-maps-api-3

Answer 1

Answer №1

To prevent tall images from appearing as ovals, make sure to specify a max-height for the images.

Answer 2

To prevent tall images from appearing as ovals, make sure to specify a max-height for the images.

Answer 3

Answer №2

If you want responsive perfect circles, the width must match the height when the screen size changes.

To accomplish this, JavaScript can be used to adjust the values accordingly as the page resizes.

Check out this example below:

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');
  
  // Adjust width based on window size
  if (width > $(window).width()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.width++;
    }
  }
  
  // Decrease width if necessary
  if (width < $(window).width()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.width--;
    }
  }

  // Increase height when needed
  if (height > $(window).height()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.height++;
    }
  }
  
  // Reduce height if necessary
  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>

This example uses inline styles to set the initial width and height because it's easier to update them dynamically with JavaScript rather than if they were in a stylesheet.

Although there may be more efficient ways to achieve this effect, this solution should work for your needs :)

You can test this out by running the code snippet and viewing it in full-page mode. Resize the page to see the circular images adjusting while maintaining their shape.

I hope this explanation helps!

Answer 4

If you want responsive perfect circles, the width must match the height when the screen size changes.

To accomplish this, JavaScript can be used to adjust the values accordingly as the page resizes.

Check out this example below:

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');
  
  // Adjust width based on window size
  if (width > $(window).width()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.width++;
    }
  }
  
  // Decrease width if necessary
  if (width < $(window).width()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.width--;
    }
  }

  // Increase height when needed
  if (height > $(window).height()) {
    for (var i = 0; i < images.length; i++) {
      images[i].style.height++;
    }
  }
  
  // Reduce height if necessary
  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>

This example uses inline styles to set the initial width and height because it's easier to update them dynamically with JavaScript rather than if they were in a stylesheet.

Although there may be more efficient ways to achieve this effect, this solution should work for your needs :)

You can test this out by running the code snippet and viewing it in full-page mode. Resize the page to see the circular images adjusting while maintaining their shape.

I hope this explanation helps!

Answer 5

Answer №3

Have you considered using object-fit: cover:

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

Keep in mind that when using object-fit, you need to explicitly declare the values for both width and height for it to function properly. These values can also be specified using relative units.

Answer 6

Have you considered using object-fit: cover:

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

Keep in mind that when using object-fit, you need to explicitly declare the values for both width and height for it to function properly. These values can also be specified using relative units.

Answer 7

Answer №4

The challenge I encountered was the need to set the width and height based on a percentage of something other than the image size itself. Initially, setting both dimensions to 30% resulted in them being relative to the image's original size which was not helpful. On the other hand, using fixed values like 200px provided a solution but lacked responsiveness.

As noted by Gerardo BLANCO before their comment was deleted, utilizing viewport height (vh) or viewport width (vw) as units proved to be effective (1 vh represents 1% of the viewport height, while 1 vw equals 1% of the viewport width). A more versatile alternative is employing vmin, equivalent to 1% of the smaller dimension between width and height of the viewport.

(Please keep in mind that vmin may encounter compatibility issues with older browsers and exhibit glitches in Edge.)

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

This approach not only ensured uniform image sizes but also allowed for dynamic adjustment of circle sizes when resizing the browser, eliminating the need to constantly refresh the InfoWindow.

Answer 8

The challenge I encountered was the need to set the width and height based on a percentage of something other than the image size itself. Initially, setting both dimensions to 30% resulted in them being relative to the image's original size which was not helpful. On the other hand, using fixed values like 200px provided a solution but lacked responsiveness.

As noted by Gerardo BLANCO before their comment was deleted, utilizing viewport height (vh) or viewport width (vw) as units proved to be effective (1 vh represents 1% of the viewport height, while 1 vw equals 1% of the viewport width). A more versatile alternative is employing vmin, equivalent to 1% of the smaller dimension between width and height of the viewport.

(Please keep in mind that vmin may encounter compatibility issues with older browsers and exhibit glitches in Edge.)

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

This approach not only ensured uniform image sizes but also allowed for dynamic adjustment of circle sizes when resizing the browser, eliminating the need to constantly refresh the InfoWindow.

Guide on creating uniform heights and widths for images with varying dimensions utilizing CSS (and percentage values)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the process for accessing a local .json file from a remote machine or folder?

Image overlaying the full width of body content background

Fade between two elements using jQuery

Utilizing Three.js to apply a matrix transformation to a collection of objects and subsequently refreshing their positions

The failover process for PayPal involves seamless transitions to backup systems in the

Pattern matching for directory path excluding the filename

How to link a sandbox file in HTML with an iPhone

Eliminate borders surrounding WordPress text widgets

CSS transitions/transforms are failing to impact the necessary elements

NodeJS: Extract images based on specified coordinates

What is the method for customizing the background color in a .vue file using Bootstrap?

Using Async functions with Node.js Express.js router

Dynamic reloading of a div with form data using jQuery's AJAX functionality

Using custom or external fonts icons in Chrome Packaged Apps involves the following steps:

Is it possible to enable a button as soon as input is entered?

Inserting line breaks in the data retrieved through AJAX

Multer can handle the uploading of various files from multiple inputs within a single form

Incorporating HTML and JavaScript into TypeScript: How to Embed a Shopify Buy Button in a .tsx document

Adding nested JSON data to MySQL using NodeJS

Listening to changes in a URL using JQuery