html - 如何调整图像的高度以使用浏览器窗口进行裁剪？

Question

我有一张图片，我想在加载网站时覆盖浏览器的整个窗口。我已经知道了，随着浏览器窗口宽度的增加或减少，图像会在调整大小的同时通过裁剪两侧来保持中心对齐和纵横比。但是，我想要它，以便随着浏览器窗口的高度增加或减少，图像被裁剪从底部，以便图像的底部始终与浏览器窗口的底部对齐并且图像的顶部永远不会被切断。换句话说，当我向下滚动时，浏览器窗口下方不应该再有图像可以滚动。我有以下 HTML 和 CSS 代码:

HTML:

 <div class="hs-slide hs-slide-count<?php echo $i; ?>">
      <div class="hs-slide-overlay"></div>
      <img src="<?php echo esc_url($hashone_slider_image); ?>" class="banner">
      <div class="hs-slide-caption">
        <div class="hs-slide-cap-title animated fadeInLeft">
          <?php echo esc_html($hashone_slider_title); ?>
        </div>

        <div class="hs-slide-cap-desc animated fadeInRight">
          <?php echo esc_html($hashone_slider_subtitle); ?>
        </div>
      </div>
    </div>

CSS:

img.banner{
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
  /* Set up positioning */
  position: relative;
  top: 0;
  left: 0;
  z-index: -1;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.banner {
left: 50%;
margin-left: -512px;   /* 50% */
  }
}

我该怎么做，最好不用 JavaScript？另外，我从一个关于用图像填充浏览器窗口的指南中获得了 CSS，但我不知道为什么 HTML 中的最小宽度专门设置为 1024px。

Answer 1

更新:

示例:https://jsfiddle.net/jbx8nco4/4/

针对您的代码的说明:您需要删除 <img>在.hs-slide里面容器，而是使用背景图像。将背景图像添加到 .hs-slide 后(见下面的代码)，.hs-slide元素需要一个高度才能可见。您可以显式设置一个或让元素适应其内容的高度。对于后者，您需要从 .hs-slide-caption 中删除所有定位。并给它一个 padding-top 和 padding-bottom。为简单起见，我在示例中设置了一个明确的高度:

.hs-slide {
  height: 800px;
  background-image: url(http://placekitten.com/1000/500); /* replace with your image */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

这段代码的速记符号是:

background: url(//placekitten.com/1000/500) center top / cover no-repeat;

background-attachment: fixed我在第一个版本的评论中提到不需要，因为您希望图像随页面滚动。

顺便说一下:因为你现在有两张背景图片，其中一张是 .hs-slide-overlay 的一部分，您可以尝试通过使用 the notation for multiple background-images 组合两个背景图像来摆脱覆盖.

旧答案:

我不完全确定，但听起来你想要的可以通过使用 CSS 来实现 background-image .我想不出使用 HTML 的无 Javascript 解决方案 img标签。

您需要将背景图像添加到延伸到视口(viewport)的整个宽度和高度的任何元素，然后设置适当的属性，最重要的是 background-size和 background-position .

body {
  width: 100%;
  height: 100%;
  background-image: url(//placekitten.com/1000/500);
  background-repeat: no-repeat;
  background-size: cover; // cover the whole area with the image
  background-position: top; // expand image from the top
  background-attachment: fixed;
}

背景属性的简写版本是:

background-image: url(//placekitten.com/1000/500) no-repeat top fixed;
background-size: cover;

这是一个活生生的例子:https://jsfiddle.net/jbx8nco4/2/

请记住，background-size: cover旧浏览器不支持。

有关使用背景图像覆盖整个页面的更多信息和更多技术，请参阅:https://css-tricks.com/perfect-full-page-background-image/