css make the picture at altitude



  • There's a code

    <div id="content">
        <div class="content"><img src="http://game.webfather.ru/img.jpg" alt=""></div>
    </div>
    

    How do you make a picture of the screen height? Now she's above the height even if she's written max-height:100%;There's a way to write. position:absolute;but it doesn't work for me, because it's making a full break on the website.

    Tell me, what are the options to make a picture of this set of elements not more than the screen height?



  • As an option:

    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }
    #content {
      width: 100%;
      height: 100%;
    }
    .content {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .content img {
      min-height: 100%;
      width: 100%;
    }
    <div id="content">
      <div class="content">
        <img src="https://yandex.ru/images/today?size=1920x1080" alt="">
      </div>
    </div>

    You can write the opposite. min-width: 100%; height: 100%;

    The only thing left is to level the picture horizontally (if its reference width is known, it won't be a problem).


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2