How to strech parent element's height to containing image

Question

Something is tormenting me for a long time now. I just can't find any way to make images fit it's parent's height.

I went trough a lot of questions here, but none gave me the answer I need.

Some of these questions are:

CSS same height as Parent
Fit image to parent div's size
How can I resize an image dynamically with CSS as the browser width/height changes?
CSS: How can I set image size relative to parent height?
CSS: 100% width or height while keeping aspect ratio?
Make an image to fit it's parent dimensions
CSS: How can I set image size relative to parent height?

Now, the problem is that whenever I insert an image to a parent element, the parent just doensn't strech in height.

An image:

http://es.tinypic.com/view.php?pic=2s1u1ec&s=9#.WLnbWvKE1jk

I'm trying to build an image slider, and the img must be absolutely positioned.

Red border should wrap the image, as well as the parent should wrap the entire image plus the padding.

Some code:

HTML:

<section>
Gray: parent

    <div class="level0">
        <div class="container">
            <img src="1.jpg" alt="image">
        </div>
    </div>

</section>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: auto;

  background-color: #565656;
}

section {
  position: relative;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  margin: 0 auto;
  padding: 1%;

  background-color: #a1a4a8;
}

.level0 {
  position: relative;
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;

  border: 4px solid red;
}

.level0 img {
  position: absolute;
  width: 100%;
}

I tried overflow: hidden, max-height, %, etc. The only thing that actually works is setting a fixed height to the parent element, but that's not good for me. I want the parent to automatically strech it's height deppending on the image's width.

Oh, one more thing. I read several JQuery, JS, or similar answers, but I would appreciate pure CSS answers. Obviously trere must be something I'm missing.

Please let me know if there is anything confusing. Thanks for the help!

mayersdesign · Answer 1 · 2017-03-03T21:47:25.320

1

I don't think there IS a way to dynamically accommodate an absolutely positioned image. You'll have to give the container a set height larger than the image.

EDIT: @Michael Coker proved there IS a way to do it, but it's a square peg in a round hole if you ask me, although skilful on his part.

edited Mar 03 '17 at 21:47

answered Mar 03 '17 at 21:38

mayersdesign

5,062
4
35
47

Thanks for the answer. That's actually what I've been doing so far. I set a fixed height and I scale it up or down depending on responsive need. But I find this a little annoying and I was trying to find something easier to mantain. – Marce Gamboa Mar 06 '17 at 23:33

score 1 · Accepted Answer · answered Mar 03 '17 at 21:40

1

You can get the image aspect ratio as a percentage by dividing the height by the width. Then use that as padding for the image parent to create the same aspect ratio shape on the parent, and it will naturally match the aspect ratio of the image.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img, a {
  text-decoration: none;
  border: none;
}

html, body {
  width: 100%;
  height: auto;
  background-color: #565656;
}

section {
  position: relative;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  margin: 0 auto;
  padding: 1%;
  background-color: #a1a4a8;
}

.container {
  position: relative;
  height: 0;
  padding-top: 56.29510826%;
  position: relative;
}

.level0 img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
}

<section>
Gray: parent

    <div class="level0">
        <div class="container">
            <img src="https://image.ibb.co/kZtbMF/Screen_Shot_2017_03_03_at_3_32_11_PM.png" alt="image">
        </div>
    </div>

</section>

answered Mar 03 '17 at 21:40

Michael Coker

52,626
5
64
64

That's one of those it CAN(!) be made to work answers ;) Imagine inheriting code with "padding-top: 56.29510826%;" it? haha – mayersdesign Mar 03 '17 at 21:45
@mayersdesign haha it's quite an exact padding amount, usually people round it. Technique found here https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php – Michael Coker Mar 03 '17 at 21:48
@MichaelCoker Like I said, I'll give it a chance and post the result – Marce Gamboa Mar 06 '17 at 23:42
@MichaelCoker Thank you so much for this trick. I tested this in my code and, even it's like mayerdesign states, works perfect ;) – Marce Gamboa Mar 07 '17 at 18:00
@MarcGamboa you're welcome. Contrary to popular belief, this is a fairly standard, yet advanced, technique. It's how you make responsive iframes, embeds, absolutely positioned elements, etc. – Michael Coker Mar 07 '17 at 18:02
@MichaelCoker Oh, ok. Then it's time to adopt it as my new standard as well. I spent hours switching heights depending on resolutions, wasting time, space and overcoding. Anyway, thanks again! – Marce Gamboa Mar 07 '17 at 18:13

How to strech parent element's height to containing image

2 Answers2