Why the div is not maintained their aspect ratio while displaying image? - html

Question

This is html code snippet:
my_button.onclick = () => {
image_holder_div.classList.remove('display_none_class');
let imgTag = `<img id="nnn" src="${fileURL}" class="mx-auto d-block" alt="..."></img>`;
image_holder_div.innerHTML = imgTag;
}
.container-fluid{
max-width: 650px;
width: 95%;
padding: 30px;
background-color: rgb(250, 252, 253);
border-radius: 4px;
border: 1px solid #dfe1e5;
/* box-shadow: 2px 2px 2px; */
position: relative;
}
.first{
height: 400px;
border: 2px dashed #8b8e96;
background-color: #fffce5;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 10px auto;
}
.image_holder_div{
height: 400px;
width: 100%;
border: 2px dashed #8b8e96;
background-color: #b4a429;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 10px auto;
position: absolute;
top: 30px;
}
<div class="container-fluid">
<div class="first">
</div>
<div class="image_holder_div display_none_class">
</div>
</div>
When I click on my_button to display image, the image_holder_div not maintained aspect ratio while displaying image. It's showing like this I upload the image here
image_holder_div
Can anyone please tell me why it's happening and how can I fix this issue...

Answer 1

Explanation of the cause:
It's totally clear from the code, that you have set the width of image_holder-div to 100% of its parent container. Since its parent element is .container-fluid, it would attain its width. It is seen that you have added padding: 30px in .container-fluid, hence, you see a space of 30 pixels between the parent and image holder div.
Solution:
You can add the following styling on the image_holder_div:
width: calc(100% - 60px);
Adding this line would use some CSS calculations and set the height of the div equal to 100% of the parent element minus 60px, i.e. 30px from left and right both. (Don't forget to add space before and after the minus sign)
For more about the calc() function:
https://www.w3schools.com/cssref/func_calc.asp