I have a query: I am facing an issue with an image inside a div. The image is larger than the div, so I set its height to 100% to make it appear correctly. When I resize the image, it adjusts well and looks fine. However, when I resize the browser to make it smaller, the image shrinks but the parent div retains the width of the original image. Essentially, the div just takes on the width of the image. To demonstrate this, I have created a fiddle for you. Try resizing your browser or the output section to observe the red background that appears. I am wondering if there is a way to dynamically adjust the dimensions of the div to match those of the image. This is important because I have other elements within the container that rely on its size. Thanks for any help!
It's worth mentioning that this behavior is consistent only in Firefox; Chrome behaves differently.
.img-wrapper {
display: inline-block;
height: 100%;
position: relative;
background-color: red;
}
.gallery-image {
bottom: 90px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 25px;
background-color: grey;
}
img {
height: 100%;
}<div class="gallery-image">
<div class="img-wrapper">
<img src="http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg" alt=""/>
</div>
</div>