How to crop/cut off an image so it fits the height of the browser window?

Question

I am using the plugin Glide.js on my frontpage, and I have build it up almost like shown on the plugin page. This also means that I wish my slider images to have 100% width, but at the same time I want them to be cropped/cut off at the bottom at the window. Precisely like it is don on the plugin page.

My html code looks like this:

    <header class='header'>
      <div class='header-wrapper'>
        <img class='header-logo' src='/assets/glide-logo-cfe0cb95a81b55ff1e872b0c578c527d.png'>
          <nav class='header_nav'>
            <ul class='header_nav-wrapper'>
              <li class='header_nav-item'>
                <a class='header_nav-item-a' href='#' id='aboutOpen'>About us</a>
              </li>
              <li class='header_nav-item'>
                <a class='header_nav-item-a' href='#'>Create account</a>
              </li>
              <li class='header_nav-item'>
                <form>
                  <button class='header_nav-item-a header_nav-item-a--btn header_nav-item-a--donate' src='https://www.paypalobjects.com/en_US/i/btn/'>Login</button>
                </form>
              </li>
            </ul>
          </nav>
        </img>
      </div>
    </header>
    <div class='slider'>
      <div class='slides'>
        <div class='slide content_article content_article--fast'>
          <center>
            <img class='slider-img' src='/assets/bg-fast-219ed63d5978022b88ba2389b4f673b6.jpg'>
            <div class='content_article-wrapper'>
              <h1 class='content_article-h'>Title 1</h1>
              <p class='content_article-p'>
                Sub title 1
              </p>
              <div class='content_article-btns'>
                <a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
                  <span class='entypo-download'></span>
                  Read more 1
                </a>
                <a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 1</a>
              </div>
              <img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/fast-img-3d905c8a57b66ef354467a9a0a07d168.png'>
            </div>
          </center>
        </div>
        <div class='slide content_article content_article--simple'>
          <center>
            <img class='slider-img' src='/assets/bg-responsive-07aefbc31666790f38a6e3e3b46f67a8.jpg'>
            <div class='content_article-wrapper'>
              <h1 class='content_article-h'>Title 2</h1>
              <p class='content_article-p'>
                Sub title 2
              </p>
              <div class='content_article-btns'>
                <a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
                  <span class='entypo-download'></span>
                  Read more 2
                </a>
                <a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 2</a>
              </div>
              <img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/responsive-img-662aaea9b8453dc6eac46064fdcc7a56.png'>
            </div>
          </center>
        </div>
        <div class='slide content_article content_article--responsive'>
          <center>
            <img class='slider-img' src='/assets/bg-simple-2d45eb663c4c69d72f66c19eb0cce285.jpg'>
            <div class='content_article-wrapper'>
              <h1 class='content_article-h'>Title 3</h1>
              <p class='content_article-p'>
                Sub title 3
              </p>
              <div class='content_article-btns'>
                <a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>
                  <span class='entypo-download'></span>
                  Read more 3
                </a>
                <a class='content_article-btn header_nav-item-a header_nav-item-a--btn' href='#'>See examples 3</a>
              </div>
              <img class='content_article-img box-shadow animated fadeOutDownBig' src='/assets/simple-img-af275d5091063498174655c95fa41079.png'>
            </div>
          </center>
        </div>
      </div>
    </div>

My css is very simple, but only handles the 100% width stretch:

.slider-img {
  width: 100%;
}

So how do I cut off my slider images so they fit the height of the screen?

Answer 1

Here is the CSS

 .crop{
        float:left;
        margin:.5em 10px .5em 0;
        overflow:hidden; /* this is important */
        border:1px solid #ccc;
      }
 /* input values to crop the image */
 .crop img{
           margin:-20px -15px -40px -55px;
       }