CODEWITHSUNDEEP
htmlcssweb
BubbleTree
BubbleTree

Reputation: 606

How do i make make a div inside a container have an image that is sized like its other div siblings?

I have a parent div container named "nav" that acts as navigational bar along with child divs that act as choices.

The problems: I would like to have an image all the way to the left, inside this nav bar. However it simply does not show up(no width) unless i make the div "logo" have a fixed width and height. When i do, the image will not appropriately re-size to fit inside the div. I only see a portion of the image. Also i want the div/image to scale relatively to the size of the div "name", not the other way around. As an example give div "logo" a width/height of 100px and see that it changes the sizing of the div "nav". The image should re-size to the same height as the div "name". If the div "name" has a height of 30px then the div "logo" should be 30px in width and height(give or take a pixel).

How do i do this? Is it possible with divs? If not what is the closest way i could do this(i would prefer to use divs)?

Code: http://jsfiddle.net/x3f63cye/3/

html, body {
    height: 100%;
    margin: 0px;
    font-family:'Myriad Pro Regular';
    color:#1E3264;
}
.flexer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
div#nav {
    position:relative;
    width:100%;
    background: white;
    box-shadow: 0px 0px 3px 1px #888888;
}
div#logo {
    background-size:contain;
    background: url('https://lh5.googleusercontent.com/-SnVrCsddc7c/AAAAAAAAAAI/AAAAAAAAAEM/v3eM1AEdb70/photo.jpg') center center no-repeat;
    border-right-style:solid;
    border-width:1px;
    border-color: rgba(0, 0, 0, 0.15);
}
div#name {
    padding: 0% 5% 0% 5%;
    border-right-style:solid;
    border-width:1px;
    border-color: rgba(0, 0, 0, 0.15);
    font-size:2em;
    align-items:center;
    justify-content: center;
}
<div id="nav" class="flexer">
    <div id="logo" class="flexer"></div>
    <div id="name" class="flexer">Choice1</div>
</div>

Upvotes: 1

Views: 91

Answers (1)

justinw
justinw

Reputation: 3976

When using a background-image, especially with background-size: contain; the image can only be shown if the element with those properties exists, with dimensions.

That being said, you have to (if the element will be empty) apply heightor min-height and it's width counterparts to give the background image something to display in.

When i do, the image will not appropriately re-size to fit inside the div. I only see a portion of the image.

The image shows up find for me, but I did edit your code:

div#logo {
    background: transparent url('https://lh5.googleusercontent.com/-SnVrCsddc7c/AAAAAAAAAAI/AAAAAAAAAEM/v3eM1AEdb70/photo.jpg') no-repeat center/contain;
    border-right-style:solid;
    border-width:1px;
    border-color: rgba(0, 0, 0, 0.15);
    height: 20px;
    width: 20px;
}

Also i want the div/image to scale relatively to the size of the div "name", not the other way around.

Then you should use relative values for your dimensions, such as % or ems, but this won't change image dimensions on resize, see fiddle, just as #name won't change height on resize.

Upvotes: 2

Related Questions