CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Prashanth Pamidi
Prashanth Pamidi

Reputation: 266

How to make the width of parent div equal to the width of child image, and height of child image to height of the parent div using CSS only

I have the following HTML along with twitter bootstrap

<div class="img-container clearfix">
  <div class="image">
    <img src="/path/to/img.img">
  </div>
  <div class="image">
    <img src="/path/to/img.img">
  </div>
  <div class="image">
    <img src="/path/to/img.img">
  </div>
  <!-- And so on.... -->
</div>

and following CSS

<style>
  div.img-container {

    height: 100%;
    width: 100%;
  }
  div.img-container > .image {

      width: auto;
      height: 50%;
      float: left;
      padding: 5px;
      opacity: 1;
  }
  div.img-container > .image > img {

    max-width: 100%;
    max-height: 100%;
  }
</style>

The height of the image is getting adjusted to the height of the parent div div.image, at the same time i want the parent div div.image to get the same width of the child image, so that all the images look equally spaced.

seems to work ok in chrome, but not working in firefox, below is the link of the same in codepen http://codepen.io/anon/pen/jPwWrV

the following is the screenshot too enter image description here

Please help me out regarding the same...

Upvotes: 0

Views: 3681

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105853

It is a bug that seems to come from padding + bootstrap. remove one or the other and it is gone.

You may set the padding to the inner image :

body {
  width: 100%;
  height: 200px;
}

div.img-container {
  height: 100%;
  width: 100%;
}

div.img-container > .image {
  height: 50%;
  float: left;
  opacity: 1;
}

div.img-container > .image > img {
  max-height: 100%;
  padding: 5px;
}

div {
  box-shadow: inset 0 0 0 1px blue, inset 0 0 3px;
}

http://codepen.io/gc-nomade/pen/pJwgRP

Upvotes: 1

Related Questions