Expand image to maximum width and height regardless of container size while preserving its aspect ratio

Question

Expand image to maximum width and height regardless of container size while preserving its aspect ratio

I need help with an <img> element that is absolutely positioned inside a <div> element. The <div> has dimensions of 100px by 100px. When the <img> is clicked, it should expand to a maximum width or height of 500px by 700px. If the original size of the <img> is smaller, for example 300px by 250px, then it should not exceed that size. Importantly, the aspect ratio must be maintained.

Simply setting the height and width to 100% results in the <img> matching the size of its containing <div>.

I am seeking a solution using either CSS or vanilla JavaScript. (I do not need code for a click animation, just a static final result so I can understand the concept)

javascript html css image

Answer 1

Answer №1

To ensure the image fits within its container, set the max-width to 100% and the height to auto.

Approach 1 : Allow the image to expand up to the width of its parent div:

.wrapper {
  width: 500px;
  height: 500px;
  border: 1px solid red;
  position: absolute;
}
.wrapper img {
  /*width:100%;*/
  height: auto;
  max-width: 100%;
}

<div class="wrapper">

  <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>

Approach 2 : Initially limit the image width using max-width property to fit thumbnail size.

On click of the image, remove the thumbnail class so it grows to original size overflowing the parent container.

.wrapper {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  /*position: absolute;*/
}
.wrapper img.thumbnail {
  /*width:100%;*/
  height: auto;
  max-width: 100%;
}

<div class="wrapper">
  Initially
  <img class="thumbnail" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>

<div class="wrapper">
  On click
  <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>

Answer 2

To ensure the image fits within its container, set the max-width to 100% and the height to auto.

Approach 1 : Allow the image to expand up to the width of its parent div:

.wrapper {
  width: 500px;
  height: 500px;
  border: 1px solid red;
  position: absolute;
}
.wrapper img {
  /*width:100%;*/
  height: auto;
  max-width: 100%;
}

<div class="wrapper">

  <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>

Approach 2 : Initially limit the image width using max-width property to fit thumbnail size.

On click of the image, remove the thumbnail class so it grows to original size overflowing the parent container.

.wrapper {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  /*position: absolute;*/
}
.wrapper img.thumbnail {
  /*width:100%;*/
  height: auto;
  max-width: 100%;
}

<div class="wrapper">
  Initially
  <img class="thumbnail" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>

<div class="wrapper">
  On click
  <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>

Expand image to maximum width and height regardless of container size while preserving its aspect ratio

Answer №1

Similar questions

What is the best way to transfer a row from one table to another using jQuery by selecting the row and then clicking to move it?

How come once I close a PrimeNG modal that is defined within a child component, I am unable to reopen it?

When using Mongoose paginate, there is always one missing document

Primeng Growl component in Angular doesn't wrap text to the next line

Retrieve all true and false values that have been checked or unchecked in an array using jQuery AJAX, and send them to a Laravel controller

Is there a way to obtain an Instagram login token through AJAX?

Selecting nested <div> elements in jQuery can be

The Power of ReactJS Spread Syntax

The hyperlinks on my website seem to be malfunctioning and I'm unable to resolve the issue

Ensure that the children elements can be resized without exceeding the boundaries

Next.js: Dealing with special characters in YouTube video API snippet titles

Present an error message via AJAX if the action is unauthorized in Laravel 5.1

Transform written content into visual data using canvas technology

Notifications for AngularJS tabs

ObtainComputedStyle yields surprising CSS properties

How can we utilize the Next.js pages router to efficiently import code that should be executed on the client side?

Step-by-step guide to creating a dynamic button that not only changes its value but also

Pressing Ctrl + S enables you to preserve the webpage for future

Can a website be designed to mimic the style of the current operating system?

Accessing feedback from Reddit's API