Html CSS：裁剪图像会使文本消失

我需要有一个100%宽度的图像，上面有菜单和表单

之后，该地区我将有网页的主要内容

为了更好地使图像适应不同的设备，我使用边距和媒体查询在左/右或顶部“裁剪”图像（调整窗口大小以进行检查）

问题是当我裁剪图像时，例如在顶部，标题内容也会上升并消失

这是我的HTML和CSS，带有：

.header{
位置：相对位置；
}
分区滑块{
位置：相对位置；
}
img{
宽度：100%；
大纲：0；
高度：自动；
}
@媒体屏幕和屏幕（最大宽度：480px）{
作物部{
左侧边缘：-12em；
}
}
@媒体屏幕和屏幕（最小宽度：800px）{
作物部{
边缘顶部：-4em；
}
}
div.header-content{
位置：绝对位置；
排名：0；
}
div.main-content{
}

菜单
表格
主要内容

这里有一种方法

要裁剪图像，可以使用容器中图像的绝对位置 已溢出的：隐藏的

您需要决定

.crop

容器的高度，我使用了

vw

单位 使用基于视口的宽度，但部分取决于布局

您需要调整媒体查询，以便选择正确的屏幕宽度范围 应用，在某些情况下，您需要同时设置

min width

和

max width

，以获得 逻辑正确

要放置图像，请调整图像和/或边距上的偏移

注意：这种方法非常灵活，具体细节（偏移、宽度、边距值）将取决于您的实际图像以及在不同屏幕尺寸下的显示方式

.header{
位置：相对位置；
}
分区滑块{
位置：相对位置；
}
img{
宽度：100%；
大纲：0；
高度：自动；
}
作物部{
溢出：隐藏；
宽度：100%；
高度：25vw；
位置：相对位置；
}
作物管理处{
显示：块；
位置：绝对位置；
高度：自动；
宽度：100%；
最高：50%；
利润率最高：-50%；
}
@媒体屏幕和（最大宽度：800px）和（最小宽度：480px）{
作物管理处{
宽度：125%；
最高：50%；
利润率最高：-60%；
左边缘：-25%；
}
}
@媒体屏幕和屏幕（最大宽度：480px）{
作物管理处{
宽度：300%；
最高：50%；
利润率最高：-150%；
左边距：-150%；
}
}
div.header-content{
背景色：黄色；/*仅用于演示*/
位置：绝对位置；
排名：0；
}
div.main-content{}

菜单
表格
主要内容
页边距顶部：-4em
打开的机密（
；）
）顶部空间，以便
标题内容
移入！（它不会消失，它只是移动到可用区域。然后移动到
-1em
以获取图片。）我知道是页边空白顶部使文本消失。我之所以使用页边空白顶部，是因为我正在裁剪图像，以便更好地适应更大的屏幕。但是我如何才能改变我的代码，使其仍然能够裁剪图像而不使文本消失呢。这就是问题所在。有很多解决方案。只是你“裁剪”图像的方式很奇怪。那么你会如何裁剪图像呢？我的做法非常普遍。。@RokoC.Buljan对我的做法有一个很好的解释：你的方法行不通。当浏览器尺寸变小时，图像左侧将出现空白。这不是我的目的。这是对我所做工作的一个很好的解释：我调整了左偏移量，只是为了让媒体查询工作正常。您可以将左偏移设置为在
.crop
元素的边缘内裁剪图像所需的任何值。@MDMoura我看了DesignShack.net文章（写得很好），您会注意到父块
。焦点
使用
溢出：隐藏
裁剪子div/图像的边缘。您的示例没有遵循DesignShack.net示例，您无意中遗漏了一些关键的CSS规则，以便该技术发挥作用。我的解决方案类似，只是我选择使用绝对定位，而不是图像的相对定位。但是，关键是您需要在包含图像的顶层块上设置
overflow:hidden
。