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

如何裁剪/剪切图像以使其适合浏览器窗口的高度？

1 个答案: