0

I am working on a responsive page, and have a large background image that I wish to keep in proportion no matter what size device a user is on. When I use an img tag for this it stretches way beyond the bottom of the screen, so I am using the background-img property instead . This is working, but I began by using an img tag and couldn't replicate the same behavior as the background-img.

Based on this SO Post I believe that I should be implement the same effect using either img or background-img

From my reading it appears that I should be able to use either and create the same experience for the user, so would love to know how to replicate the background-img properties from the code below into the code with my img tag.

Please see the code below.

With the background-image property set. This works as I like.

HTML

<div id="container">
    <div class="main-image">
    </div>
</div>

CSS

html, body {
    width: 100%;
    margin: 0;
}
.main-image {
    background: url(http://i2.cdn.turner.com/cnnnext/dam/assets/151009172735-02-tbt-bob-dylan-restricted-super-169.jpg) center center no-repeat;
    background-size: cover;
    max-height: 90%;
 }

With <img> attribute. What would be needed to be done to replicate the same behavior as the css above? I have tried playing around with all attributes but cannot figure this out.

HTML

<div id="container">
    <div class="main-image">
        <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/151009172735-02-tbt-bob-dylan-restricted-super-169.jpg">
    </div>
</div>

CSS

html, body {
    width: 100%;
    margin: 0;
}

.main-image {
    width: 100%;
    max-height: 90%;
 }

img { 
    width: 100%;
 }
Community
  • 1
  • 1

2 Answers2

0

You can try to play around with object-fit: cover; on the img

ynter
  • 277
  • 1
  • 5
  • 16
0

You can do this with the object-fit CSS declaration. Please note the browser support which you can see from here http://caniuse.com/#search=object-fit. An example snippet below with both options one under another for demonstrating the effect.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#container,
#container2 {
  width: 400px;
  height: 300px;
}
.main-image {
  width: 100%;
  height: 100%;
}
.main-image-bg {
  background: url(http://i2.cdn.turner.com/cnnnext/dam/assets/151009172735-02-tbt-bob-dylan-restricted-super-169.jpg) center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This mages the image behave like background-image with background-size: cover */
}
<h4>With image</h4>
<div id="container">
  <div class="main-image">
    <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/151009172735-02-tbt-bob-dylan-restricted-super-169.jpg">
  </div>
</div>
<h4>With background-image</h4>
<div id="container2">
  <div class="main-image-bg"></div>
</div>
thepio
  • 6,193
  • 5
  • 35
  • 54
  • but in this post it appears that i should be able to use them interchangeably, without any mention of the `object-fit` property - http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image –  Sep 14 '16 at 10:46
  • That post was answered in 2009 and edited in 2014. Things change fast in this area :P – thepio Sep 14 '16 at 10:55
  • so you think for certain implementations you should use background image, whereas for others use an `img` tag? Just to put my mind at ease :-) –  Sep 14 '16 at 10:58
  • 1
    Well for just displaying a normal image at the proportions that it originally have you can use just an simple `` tag. Of course you can set `max-width` etc for responsiveness and so on but for everything else there's the `background-image`. In my opinion at least and I do it this way. I mean if you want to animate, set layers on top of the image, have the image display different parts/size etc or whatever you would like to do, I would use `background-image` property. – thepio Sep 14 '16 at 11:06