CODEWITHSUNDEEP
htmlcssimagewidth
Busti
Busti

Reputation: 5604

Make element fill rest of div without resizing Image

I want the Logo Image in this nav-bar to fill its height while still retaining its aspect ratio. The remaining width should be filled by the ul element.
As long as the ul elements width is not 100% the image is displayed correctly.

http://jsfiddle.net/5o0b4xLd/

How can I do that?

The Code:

<div id="navbar">
<div id="logoBox">
    <img src="http://i.imgur.com/wuRN2wD.png" id="logo">
</div>
<ul>
    <li>
        <a href="#fakelink">
            Item 1
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 2
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 3
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 4
        </a>
    </li>
    <li>
        <a href="#fakelink">
            Item 5
        </a>
    </li>
</ul>


#navbar {
    display: flex;
    width: 80%;
    height: 3.8em;
    margin-top: 4em;
    margin-left: auto;
    margin-right: auto;
    background: #f39c12;
}

#logoBox {
    display: inline-block;
    *display: inline;
    height: 100%;
    float: left;
    margin-left: 1%;
}

#logo {
    max-height: 100%;
    max-width: 100%;
}

#navbar ul {
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    overflow: hidden;
    width: 100%;
    height: 100%;
    right: 0;
    margin: 0;
    padding: 0;
}

#navbar li {
    display: inline-block;
    padding-left: 4%;
    margin-top: 1.9em;
    line-height: 0;
}

#navbar a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.25em;
}

Upvotes: 0

Views: 204

Answers (2)

VoidBOY
VoidBOY

Reputation: 71

here edit your css like following: i added background image & background size to scale image via width. Also hiding the actual image to make it just a placeholder, rest of code is fine.

#logoBox {
    display: inline-block;
    *display: inline;
    height: 100%;
    float: left;
    margin-left: 1%;
    background:url(http://i.imgur.com/wuRN2wD.png) no-repeat;
    background-size:cover;
}

#logo {
    max-height: 100%;
    max-width: 100%;
    visibility:hidden;
}

Upvotes: 0

Pace
Pace

Reputation: 58

Your current issue is in the #logo attributes - max-width and max-height won't actually expand the div unless there is content inside that forces it to expand. Also, you'll want to set the background-size = cover so the aspect ratio is maintained.

Try this instead:

#logo { max-height: 100%; height: 100%; background-size: cover; }

Upvotes: 1

Related Questions