更新

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中移除所有定位并为其添加填充顶部和填充底部。为简单起见，我在示例中设置了一个明确的高度：

.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 img标记来考虑使用无Javascript的解决方案。

您需要将背景图像添加到任何延伸到视口的整个宽度和高度的元素，然后设置适当的属性，最重要的是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/

如何使用浏览器窗口调整要裁剪的图像高度？

1 个答案:

更新

旧答案：