时间戳

首页 > 解决方案 > 在 CSS 中使裁剪的图像具有响应性

html - 在 CSS 中使裁剪的图像具有响应性

问题描述

信息：我有一个裁剪图像用作网页顶部的背景图像。在 CSS 中，我在 px 中定义了包含图像的 div 的大小——它正在裁剪图像。（我在 Squarespace 中这样做）。因此，当您进入页面时，您会看到背景图像（和一些文本）填满屏幕，然后您向下滚动查看图像。

问题：当我减小 Web 浏览器窗口的大小时，div 当然保持相同的 px 高度。这意味着图像最终成为页面大部分的背景 - 我只是希望它在您进入页面时位于顶部。

问题：如何使裁剪 div 响应高度？据我研究，我只能设置 px 中的值，这对响应不友好......以下代码基于我的外部屏幕尺寸。所以我需要大屏幕的高度 px。

我的代码：


.header-background {
   position: absolute;
   top: -160px;
   left: -335px;
   right: -335px;
   height: 850px;  
   z-index: -1;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-image: img src('/s/Sams-sort.png')

标签： htmlcssresponsive-imagesbackground-size

解决方案

给它一个占用更高空间的自由高度只有高度：自动

推荐阅读