CODEWITHSUNDEEP
htmlcssimageresize
Link Link
Link Link

Reputation: 81

How to prevent changing parent's width on resize

I got a question: I have an image in a div. the image is bigger that the div and it has height:100% to make it look ok. So when I do a resize image becomes bigger and it looks fine. but when I resize the browser to make it smaller image becomes smaller, but its parent saves the width of the original image. In fact it just takes the width of an image. I got a fiddle for you, just try to resize your browser or the output section to see the red background appear. I'm curious is there any chance to make the div dimenstions the same as the image's dynamically. I need the container dimensions cause I have some other elements besides the image and they use the coordinates of the div. thanks.

important! it works the way I saw it only in FireFox. Chrome's behaviour is different.

.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>

Upvotes: 0

Views: 767

Answers (2)

dtouch3d
dtouch3d

Reputation: 143

You can set the minimum dimensions of an image so it won't become any smaller like this

 img {
     min-height: 200px;
     min-width: 400px;
 }

Upvotes: 1

Derrick Wells
Derrick Wells

Reputation: 318

This is usually done with CSS using background-image:url("http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg").. This way your image and div become one object. Then you just control the div and the background image size accordingly. Side Note... It helps with performance as well.

Upvotes: 1

Related Questions