How to have div fill width and height of browser window and not have the image be streched


Tags: html,css

Problem :

Im trying have an image in a browser height and width filling div and want the image to scale to fit, it currently stretches. I want to use the image as you normally use a background image. i cant in this case because it switches using its html ID

my css

    .cover{
    position: relative;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display:block; 
    margin: 0 auto;
 }

my html

<div class="cover" id="1">
    <img class="cover" src="Images/Articles/Index/MRD%2008-041.jpg">


   <a href="Articles/boy.html"> 
   <span class="title">The Next Generation of Film<br>is in Our Own Backyard</span></a>

   <span class="post"> North Toronto sees yet another high budget Disney movie Filmed on     it's grounds.</span>
 </div>

and a jsfiddle for good measure. again, how do i make the Image fill the height and width of browser window without stretching the image. Thanks



Solution :

Display your image through the CSS using background-image and apply the extra property background-size to make it fill the container.

Here’s a fiddle.

HTML

<div class="cover" id="1">
    <a href="Articles/boy.html"> 
       <span class="title">The Next Generation of Film<br>is in Our Own Backyard</span>
   </a>
</div>

CSS

// Required to allow the .cover container to fill the entire window. min-height could do the trick too depending on your wishes
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

.cover {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background: url('http://placehold.it/550x300') no-repeat center center;
    background-size: cover;
}

    CSS Howto..

    How to move an entire group of objects with Javascript

    how to show a portion of image like on 9gag.com

    How do I code a BTN in an HTML project to open a users email client

    How to add a sliding div to these CSS Message Bubbles?

    How to rotate the text Rotation with center to the Number

    how to hide submenus in jquery menu

    How to styles labels only within fieldsets using CSS?

    How to create popups in css /Javascript?

    How to find out and get rid of unused CSS code? [closed]

    How to change the CSS of Background Element?

    How to reveal content behind a div with pure css?

    How to: Illustrator graphic to web animation [closed]

    How to ignore white spaces in between tags, CSS, PHP

    How to selectively load/use CSS for YUI modules?

    How to fit img into div circle ?

    How can I add a border INSIDE this element?

    How To Fix This “Select” Drop Down Using Css [duplicate]

    How to show something only when user prints?

    How to center a border-width shape properly, relative to its parent input button?

    How do I adjust position of a text inside a Bootstrap panel with overriden max-height?

    How to make an image display above the background of an :after element

    How do I align an image within a pan/hover border/box?

    How to add a line break inside with CSS?

    How put a top border to a title that only cover the letters in css

    How to Remove CSS line-through

    How to align buttons arround a circle image

    How to center my hmenu (no matter the resolution)?

    How to place something in a triangle-shaped box?

    How to make CSS file more important than another CSS file? [closed]

    Two sprites on same position: how to make this happen?