100 width background image with an auto height

Question

I m currently working on a mobile landing page for a company  It s a really basic layout but below the header there s an image of a product which will always be 100  width  the design shows it always going from edge to edge   Depending on the width of the screen the height of the image will obviously adjust accordingly  I originally did this with an img  with a CSS width of 100   and it worked great but I ve realised that I d like to use media queries to serve different images based on different resolutions - let s say a small  medium and a large version of the same image  for example  I know you can t change the img src with CSS so I figured I should be using a CSS background for the image as opposed to an img tag in the HTML   I can t seem to get this working properly as the div with the background image needs both a width and a height to show the background  I can obviously use  width  100   but what do I use for the height  I can put a random fixed height like 150px and then I can see the top 150px of the image but this isn t the solution as there isn t a fixed height  I had a play and found that once there is a height  tested with 150px  I can use  background-size  100   to fit the image in the div correctly  I can use the more recent CSS3 for this project as it s aimed solely at mobile   I ve added a rough example below  Please excuse the inline styles but I wanted to give a basic example to try and make my question a little clearer    lt div id  image-container  gt       lt div id  image  style  background  url image jpg  no-repeat  width  100   height  150px  background-size  100    gt  lt  div gt   lt  div gt    Do I maybe have to give the container div a percentage height based on the whole page or am I looking at this completely wrong   Also  do you think CSS backgrounds are the best way to do this  Maybe there s a technique which serves different img tags based on device screen width  The general idea is that the landing page template will be used numerous times with different product images so I need to make sure I develop this the best way possible   I apologise is this is a little long-winded but I m back and forth from this project to the next so I d like to get this little thing done  Thanks in advance for your time  it s much appreciated  Regards

User · Accepted Answer

Instead of using background-image you can use img directly and to get the image to spread all the width of the viewport try using max-width 100   and please remember don t apply any padding or margin to your main container div as they will increase the total width of the container  Using this rule you can have a image width equal to the width of the browser and the height will also change according to the aspect ratio  Thanks   Edit  Changing the image on different size of the window   x000D   x000D    window  resize function    x000D    var windowWidth     window  width    x000D    var imgSrc       image    x000D    if windowWidth  lt   400      x000D      imgSrc attr  src   http   cdn sstatic net Sites stackoverflow company img logos so so-icon png v c78bd457575a    x000D      x000D    else if windowWidth  gt  400   x000D      imgSrc attr  src   http   i stack imgur com oURrw png    x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  image-container  gt  x000D     lt img id  image  src  http   cdn sstatic net Sites stackoverflow company img logos so so-icon png v c78bd457575a  alt     gt  x000D   lt  div gt  x000D   x000D   x000D    In this way you change your image in different size of the browser

User · Answer

Add the css      html body          height 100                  bg-img           background  url image jpg  no-repeat center top           background-size  cover           height 100                And html is    lt div class  bg-mg  gt  lt  div gt    CSS  stretching background image to 100  width and height of screen

User · Answer

Tim S  was much closer to a  correct  answer then the currently accepted one  If you want to have a 100  width  variable height background image done with CSS  instead of using cover  which will allow the image to extend out from the sides  or contain  which does not allow the image to extend out at all   just set the CSS like so   body       background-image  url img jpg       background-position  center top      background-size  100  auto      This will set your background image to 100  width and allow the height to overflow  Now you can use media queries to swap out that image instead of relying on JavaScript   EDIT  I just realized  3 months later  that you probably don t want the image to overflow  you seem to want the container element to resize based on it s background-image  to preserve it s aspect ratio   which is not possible with CSS as far as I know   Hopefully soon you ll be able to use the new srcset attribute on the img element  If you want to use img elements now  the currently accepted answer is probably best   However  you can create a responsive background-image element with a constant aspect ratio using purely CSS  To do this  you set the height to 0 and set the padding-bottom to a percentage of the element s own width  like so    foo       height  0      padding  0     remove any pre-existing padding  just in case        padding-bottom  75      for a 4 3 aspect ratio        background-image  url foo png       background-position  center center      background-size  100       background-repeat  no-repeat      In order to use different aspect ratios  divide the height of the original image by it s own width  and multiply by 100 to get the percentage value  This works because padding percentage is always calculated based on width  even if it s vertical padding

User · Answer

Try this   html      background  url image jpg  no-repeat center center fixed     -webkit-background-size  cover       -moz-background-size  cover         -o-background-size  cover            background-size  cover      Simplified version  html     background  url image jpg  center center   cover no-repeat fixed

User · Answer

You can use the CSS property background-size and set it to cover or contain  depending your preference  Cover will cover the window entirely  while contain will make one side fit the window thus not covering the entire page  unless the aspect ratio of the screen is equal to the image    Please note that this is a CSS3 property  In older browsers  this property is ignored  Alternatively  you can use javascript to change the CSS settings depending on the window size  but this isn t preferred   body       background-image  url image jpg      image        background-position  center          center the image        background-size  cover               cover the entire window

User · Answer

It s 2017  and now you can use object-fit which has decent support  It works in the same way as a div s background-size but on the element itself  and on any element including images    your-img     max-width  100     max-height  100     object-fit  contain

User · Answer

html      height 100          bg-img       background  url image jpg  no-repeat center top       background-size  cover       height 100vh

User · Answer

Just use a two color background image    lt div style  width 100   background url  images bkgmid png           background-size  cover   gt  content  lt  div gt

[html] 100% width background image with an 'auto' height

Examples related to html

Examples related to css

Examples related to background-image

Examples related to responsive

Examples related to responsive-images