如何裁剪/剪切圖像以適應瀏覽器窗口的高度？

Question

我在我的首頁上使用插件Glide.js，並且我已經將它構建得基本上像插件頁面上顯示的那樣。這也意味着我希望我的滑塊圖像具有100％的寬度，但同時我希望它們在窗口底部被裁剪/切斷。精確地喜歡它不在插件頁面上。

我的HTML代碼如下所示：

<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> 

我的CSS是很簡單，但只處理了100％的寬度拉伸：

.slider-img { 
    width: 100%; 
} 

那麼，如何切斷我的滑塊的圖像，以便他們適合屏幕的高度？

Answer 1

這裏是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; 
     }