Image size 100 % - CSS HELP

Discussion in 'Programming' started by lionel.web, Sep 11, 2014.

to remove all ads.
  1. lionel.web

    lionel.web Member

    Messages:
    95
    Hi!

    I try to do this:

    I have an element, and i want the background image to be all over the background.

    e.g.
    <div id=""mydiv"">
    </div>

    #mydiv{width:100%; height:100%;background:url(images/image1.jpg) no-repeat; background-size:cover;}

    If i want, to do this:

    <div id=""mydiv"">
    <img src=""images/image1.jpg"">
    </div>

    #mydiv{width:100%; height:100%;}
    #mydiv img{}

    How can i make the same effect, with the image, to be cover all over the div????
    But, without background-size:cover. Is it possible???
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    Make the parent div have the same dimensions as the image.
     
  3. lionel.web

    lionel.web Member

    Messages:
    95
    Thanks for your answer, but that's not what i want.

    I want the image to be fill in the parent div. Even if cropped.
    Like background-size:cover;
    The parent div, is 100% width, 100% height (fullscreen)

    Can this be done with html/css/javascript ?
     
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    Try
    HTML:
    img {
        max-width: 100%;
        max-height: 100%;
    }
    But expect the image to be distorted if the aspect ratio of the parent element does not match the image aspect ratio exactly.

    Other than that, background-size: cover; IS the way to fill the parent without distorting the image.
     
  5. lionel.web

    lionel.web Member

    Messages:
    95
    Thanks chrishirst.
    I'll try max-width, max-height 100%.

    Do u know any javascript, that will make the trick correctly like background-size:cover ???
     
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    It's not something I've ever needed so have not investigated what is required to accomplish it.
     
  7. Brian Angel

    Brian Angel Member

    Messages:
    248
  8. lionel.web

    lionel.web Member

    Messages:
    95
    @Brian Angel
    Thanks a lot!
    That was, what i needed!!!!
    Great article/link!
     
  9. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637
    And that is related to this question, ..... .... because??????
     

Share This Page