Auto height with dynamic height image

Question

I search a lot info about height:auto ,but I didnt find a solution for my problem. I need a full width image with dynamic height ,but that doesn't work :( Anyone can help!?

HTML:

<div id="roster">
<div class="image"></div>
</div>

CSS

#roster{}

#roster .image{
    background-image:("http://nhlawyer.net/wp-content/uploads/header-image-2.jpg");
  width:100%;
  height:auto;
}

There is my jsFiddle

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Jul 15 '16 at 14:25
@Paulie_D _I need a full width image with dynamic height_ Actual image? how it is? — eatmailyo, Jul 15 '16 at 14:27
@Paulie_D when I change browser size ,image height changing. these are responsive design things ,but I dont know how to make this. — eatmailyo, Jul 15 '16 at 14:29
@Paulie_D then image shows in that height ,what I change ,but I dont need that. I need dynamic height. — eatmailyo, Jul 15 '16 at 14:31
@CarolMcKay that change only how image shows ,but as you see in my jsfiddle ,even height not working. — eatmailyo, Jul 15 '16 at 14:34

score 1 · Accepted Answer · answered Jul 15 '16 at 14:35

You should use the image as <img> tag not as a background-image and by default if you make the image width:100%; its height will be auto

#roster img{
 width:100%;
}

<div id="roster">
  <img src="http://nhlawyer.net/wp-content/uploads/header-image-2.jpg">
</div>

If you are using the image as background you should give the element specific height then you can handle the height of background by background-size: cover;

#roster .image{
  height:50px;
  background-image:url("http://nhlawyer.net/wp-content/uploads/header-image-2.jpg");
  background-size:cover;
}

<div id="roster">
  <div class="image"></div>
</div>

vignesh · Answer 2 · 2016-07-15T14:37:22.633

0

Please try this

#roster .image {
    background: url('https://nhlawyer.net/wp-content/uploads/header-image-2.jpg');
    width: 100%;
    height: 250px;
    background-size: 100%;
    background-repeat: no-repeat;
}

edited Jul 15 '16 at 14:37

answered Jul 15 '16 at 14:34

vignesh

951
5
13

_I need a full width image with dynamic height_ This solution doesn't work with dynamic height. – eatmailyo Jul 15 '16 at 14:36

Auto height with dynamic height image

2 Answers2