1

Browser version

Firefox 79.0

When img is used as a child element, and its height is set to 100% of the parent element, the expected phenomenon is that the width of the parent element is determined by the img. Eventually, in the Firefox browser, the img is scaled proportionally, but the width of the parent element is the child element original width. I can get the expected result in Google browser. The code show as below.

<div class="outer-est">
        <div class="outer">
            <div class="outer_container">
                <div class="content_panel">
                    <div class="icon_panel">
                        <a href="" class="link_btn">
                            <img src="img/join_us/email.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer-est {
            position: relative;
            width: 100%;
        }
        .outer {
            width: 62.5%;
            margin: 0 auto;
        }
        .outer_container {
            width: 100%;
            /* height: 270px; */
            padding-bottom: 30%;
            position: relative;
        }
        .content_panel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .icon_panel {
            height: 20%;
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
        }
        .link_btn {
            height: 100%;
        }
        .link_btn>img {
            display: inline-block;
            height: 100%;
            width: auto;
        }
    </style>

My try

When I set a fixed height for outer_container, Firefox give me a expected result.

Aka Monk
  • 11
  • 1
  • Does this answer your question? [Why doesn't height: 100% work to expand divs to the screen height?](https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height) or this: [CSS height 100% percent not working](https://stackoverflow.com/questions/21357238/css-height-100-percent-not-working) – FluffyKitten Sep 08 '20 at 02:07
  • Thanks for your reply. Maybe this is not cause of this problem. `outer_container` height is up to `padding-bottom`, and `content_panel` is an absolute element. The height of the child element was set to 100% worked.Has a wrong understanding?. I'm a novice. – Aka Monk Sep 08 '20 at 02:40
  • 1
    The parent must have a specified (not calculated) height for height:100% to work on a child. None of your elements have a height specified which is why it won't work for your image. – FluffyKitten Sep 08 '20 at 02:52
  • `img` has a correct scaling, but the `a` element width is the `img` width before scaling. – Aka Monk Sep 08 '20 at 03:02

0 Answers0