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.

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

The automatic opening of a modal in a Livewire component is not functioning as expected

What is the best way to manage the "checked" state of an input checkbox using React?

Conceal a particular row in SharePoint by utilizing JavaScript with jQuery

Enhancing Website Functionality: How to Swap iFrame for DIV using PHP and AJAX

Retrieve information from every nested array and present it in sequential order

Running two servers at the same time using nodemon might seem complex, but it

Which approach is more impactful: consistently sending an ajax request or breaking down the result within a function?

PHP for creating dynamic website search capabilities

Experiencing difficulty with parsing an array's json/string version within an Angular controller

How to pass only the clicked element to the onClick function in React.js

What is the best way to require users to click one of the toggle buttons in a form?

There seems to be an issue with Jquery not triggering the Webservice method in the Firefox browser, despite it working successfully in Chrome

How can progress bars be animated using CSS or JavaScript?

An error has occurred during runtime due to a TypeError: The application is unable to access properties of an undefined object, specifically 'Upload'. This error has

Changing the size of an image in an HTML5 canvas

Text appearing in varying sizes across browsers

Using Javascript, populate an array with Enum variable values

CSS: element misplaced at the top instead of the bottom where it belongs

I keep encountering an issue with npm where it is unable to identify the executable to run whenever I launch VS Code and attempt to use Cypress

For Firefox, the status code always comes back as 0 when using xmlhttprequest