Adjusting the sizes of images with varying aspect ratios to perfectly fit within a div without distorting its shape

Question

Adjusting the sizes of images with varying aspect ratios to perfectly fit within a div without distorting its shape

I'm currently in the process of developing my portfolio website and I am faced with creating a simplistic image browser feature. My goal is to have a container div that adjusts in size according to the browser window, allowing it to house images of various aspect ratios alongside captions of fixed height but width relative to the image's width. Rather than having the div stretch to accommodate the images, I aim to resize the images themselves (as demonstrated in the provided picture).

View illustration of the problem here

My initial attempt involved using JavaScript to calculate the image size, however, I encountered difficulties as I was unable to determine the element's dimensions before it had fully loaded. Below is an outline of how I approached this issue (excluding consideration for the titlebar):

var divAspectRatio = containerDiv.offsetHeight/containerDiv.offsetWidth;
var imageAspectRatio = image.offsetHeight/image.offsetWidth;
if(divAspectRatio>imageAspectRatio){
  image.style.height = content_in.offsetHeight;
}else{
  image.style.width = content_in.offsetWidth;
}
captionDiv.style.width = image.offsetWidth;

Any suggestions on how I can resolve this?

javascript html css

Answer 1

Answer №1

To achieve the desired layout, some calculations are necessary due to the difference in aspect ratios between an image and its container. It is important to ensure that the caption area is only as wide as the displayed image, while maintaining a fixed height.

The images are enclosed within an 'innerdiv' element, which also contains the caption. Upon loading, the image's aspect ratio is calculated and stored as a CSS variable. Additionally, various other CSS variables are pre-defined for customization options. The remaining calculations are then handled purely in CSS.

window.onload = function () {
  const imgs = document.querySelectorAll('.container .innerdiv .img');
  imgs.forEach(img => {
    img.parentElement.style.setProperty('--imgratio', img.naturalWidth / img.naturalHeight);
    img.parentElement.classList.add(( (img.naturalWidth / img.naturalHeight) > getComputedStyle(img).getPropertyValue("--containerratio") ) ? 'wider' : 'thinner');
  });
}

* {
  padding: 0;
  margin: 0;
}
.container {
/* SET THE NEXT 4 VARIABLES TO WHAT YOU REQUIRE */
  --unit: 1vmin; /* the basic unit - must be fixed e.g. vmin, px, ch not % */
  --containerw: 40; /* width of a container in these units */
  --containerratio: 1.5; /* the ratio of width to height */
  --captionh: 4vmin; /* height of a caption including its units (which must be fixed e.g. vmin, px, em */

  --containerh: calc(var(--containerw) / var(--containerratio));

  display: inline-block;
  width: calc(var(--containerw) * var(--unit));
  height: calc(var(--containerh) * var(--unit));
  position: relative;
  border: solid;
}

.innerdiv {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.innerdiv.thinner {
  width: calc(var(--imgratio) * ((var(--containerh) * var(--unit)) - var(--captionh)));
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.innerdiv.wider {
  width: 100%;
  height: calc((var(--containerw) / var(--imgratio)) * var(--unit) + var(--captionh));
  top: 50%;
  transform: translateY(-50%);
}

.img {
  width: 100%;
  height: auto;  
}

.caption {
  font-size: 2vmin;
  background-color: yellow;
  text-align: center;
  width: 100%;
  height: var(--captionh);
  position: absolute;
  top: calc(100% - var(--captionh));
  left: 0;
}

<div class="container">
  <div class="innerdiv">
    <img class="img" src="https://picsum.photos/id/1016/200/300">
    <div class="caption">CAPTION</div>
  </div>
</div>
<div class="container">
  <div class="innerdiv">
    <img class="img" src="https://picsum.photos/id/1016/500/200">
    <div class="caption">CAPTION</div>
  </div>
</div>
<div class="container">
  <div class="innerdiv">
    <img class="img" src="https://picsum.photos/id/1016/300/300">
    <div class="caption">CAPTION</div>
  </div>
</div>

Answer 2

To achieve the desired layout, some calculations are necessary due to the difference in aspect ratios between an image and its container. It is important to ensure that the caption area is only as wide as the displayed image, while maintaining a fixed height.

The images are enclosed within an 'innerdiv' element, which also contains the caption. Upon loading, the image's aspect ratio is calculated and stored as a CSS variable. Additionally, various other CSS variables are pre-defined for customization options. The remaining calculations are then handled purely in CSS.

window.onload = function () {
  const imgs = document.querySelectorAll('.container .innerdiv .img');
  imgs.forEach(img => {
    img.parentElement.style.setProperty('--imgratio', img.naturalWidth / img.naturalHeight);
    img.parentElement.classList.add(( (img.naturalWidth / img.naturalHeight) > getComputedStyle(img).getPropertyValue("--containerratio") ) ? 'wider' : 'thinner');
  });
}

* {
  padding: 0;
  margin: 0;
}
.container {
/* SET THE NEXT 4 VARIABLES TO WHAT YOU REQUIRE */
  --unit: 1vmin; /* the basic unit - must be fixed e.g. vmin, px, ch not % */
  --containerw: 40; /* width of a container in these units */
  --containerratio: 1.5; /* the ratio of width to height */
  --captionh: 4vmin; /* height of a caption including its units (which must be fixed e.g. vmin, px, em */

  --containerh: calc(var(--containerw) / var(--containerratio));

  display: inline-block;
  width: calc(var(--containerw) * var(--unit));
  height: calc(var(--containerh) * var(--unit));
  position: relative;
  border: solid;
}

.innerdiv {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.innerdiv.thinner {
  width: calc(var(--imgratio) * ((var(--containerh) * var(--unit)) - var(--captionh)));
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.innerdiv.wider {
  width: 100%;
  height: calc((var(--containerw) / var(--imgratio)) * var(--unit) + var(--captionh));
  top: 50%;
  transform: translateY(-50%);
}

.img {
  width: 100%;
  height: auto;  
}

.caption {
  font-size: 2vmin;
  background-color: yellow;
  text-align: center;
  width: 100%;
  height: var(--captionh);
  position: absolute;
  top: calc(100% - var(--captionh));
  left: 0;
}

<div class="container">
  <div class="innerdiv">
    <img class="img" src="https://picsum.photos/id/1016/200/300">
    <div class="caption">CAPTION</div>
  </div>
</div>
<div class="container">
  <div class="innerdiv">
    <img class="img" src="https://picsum.photos/id/1016/500/200">
    <div class="caption">CAPTION</div>
  </div>
</div>
<div class="container">
  <div class="innerdiv">
    <img class="img" src="https://picsum.photos/id/1016/300/300">
    <div class="caption">CAPTION</div>
  </div>
</div>

Answer 3

Answer №2

For a background image within a div element, ensure to include the following in your CSS, within the div section: background-size: cover;

If the image is contained within an img element, be sure to add the following to your CSS, within the img section: object-fit: cover;

Answer 4

For a background image within a div element, ensure to include the following in your CSS, within the div section: background-size: cover;

If the image is contained within an img element, be sure to add the following to your CSS, within the img section: object-fit: cover;

Answer 5

Answer №3

Consider incorporating the following css property:

object-fit: cover

By doing so, your image will be adjusted to properly fit within its designated container!

Answer 6

Consider incorporating the following css property:

object-fit: cover

By doing so, your image will be adjusted to properly fit within its designated container!

Adjusting the sizes of images with varying aspect ratios to perfectly fit within a div without distorting its shape

Answer №1

Answer №2

Answer №3

Similar questions

"Utilizing Vue.js to make an AJAX request and trigger another method within a

Activate Bootstrap datetimepicker by using the enter key to automatically populate the initial date

Deploy a Node.js websocket application on Azure Cloud platform

Is it impossible for both <a> and <name=""> to collaborate in HTML and PHP?

Use the color specified within the string

Unable to save captured signature image during saveEvent function in React Native

Having trouble with jQuery toggle fade: Unable to make the div fade in/out when toggling

What is the best way to implement buttons dynamically in multiple divs created by Django using JavaScript loops?

Troubleshooting not locating view files in ExpressJS and implementing client-side JavaScript and CSS deployment in ExpressJS

Leveraging node.js for website development

Boundary around an object within a unified picture

Running Angular without dependencies causes it to malfunction

I'm curious if there's a method to ensure that the content within a mat-card stays responsive

What is the fallback mechanism in Astro js when the cache is unavailable?

Insert an item into an array of objects at regular intervals of X objects

Swapping a value within an array and moving it to a new position

Guidelines for sending an array from a Laravel Controller through AJAX and generating a button based on the received data

Using Javascript's .replace() method to preserve HTML elements

Creating interactive PDF files using ReactJS

Developing tabbed sections in XSLT