CSS：裁剪图像使文本消失

Question

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

在该区域之后，我将拥有页面主要内容...

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

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

这是我的 HTML 和 CSS，带有 JSFiddle example：

.header {
    position: relative;       
}
div.slider {
    position: relative;
}

img {
    width: 100%;
    outline: 0;
    height: auto;
}
@media screen and (max-width:480px) {
    div.crop {
        margin-left: -12em; 
    }
}
@media screen and (min-width:800px) {
    div.crop {
        margin-top: -4em; 
    }
}
div.header-content {
    position: absolute;
    top: 0;     
}
div.main-content {   
}

<div class="header">    
   <div class="slider">
      <div class="crop">          
         <img class="slide" src="http://placehold.it/800x200"/>
      </div>
   </div>
   <div class="header-content">
      <div class="menu">
         A menu
      </div>
      <div class="form">
         A form
      </div>
   </div>    
</div>
<div class="main-content">
   Main Content
</div>

通过删除“裁剪”部分，一切正常......

这是我的非裁剪版本的 HTML 和 CSS JSFiddle example：

.header {
  position: relative;       
}
div.slider {
  position: relative;
}
img {
  width: 100%;
  height: auto;
  outline: 0;
}
div.header-content {
  position: absolute;
  top: 0;     
}
div.main-content { }

<div class="header">
  <div class="slider">
    <img class="slide" src="http://placehold.it/800x200"/>
  </div>
  <div class="header-content">
   <div class="menu">
       A menu
   </div>
   <div class="form">
       A form
    </div>
  </div>    
</div>
<div class="main-content">
  Main Content
</div>

我该如何解决这个问题？

Answer 1

这是一种方法。

要裁剪图像，您可以在容器内的图像上使用绝对位置 有overflow: hidden。

你需要决定.crop容器的高度，我用vw单位 with 基于视口的宽度，但部分取决于您的布局。

您需要调整您的媒体查询，以便正确的屏幕宽度范围 应用，在某些情况下，您需要同时设置min-width 和max-width 才能获得 逻辑正确。

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

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

.header {
  position: relative;
}
div.slider {
  position: relative;
}
img {
  width: 100%;
  outline: 0;
  height: auto;
}
div.crop {
  overflow: hidden;
  width: 100%;
  height: 25vw;
  position: relative;
}
div.crop img {
  display: block;
  position: absolute;
  height: auto;
  width: 100%;
  top: 50%;
  margin-top: -50%;
}
@media screen and (max-width: 800px) and (min-width: 480px) {
  div.crop img {
  width: 125%;
  top: 50%;
  margin-top: -60%;
  margin-left: -25%;
  }
}
@media screen and (max-width: 480px) {
  div.crop img {
  width: 300%;
  top: 50%;
  margin-top: -150%;
  margin-left: -150%;
  }
}
div.header-content {
  background-color: yellow;  /* for demo only */
  position: absolute;
  top: 0;
}
div.main-content {}

<div class="header">
  <div class="slider">
    <div class="crop">
      <img class="slide" src="http://placekitten.com/1000/1000" />
    </div>
  </div>
  <div class="header-content">
    <div class="menu">
      A menu
    </div>
    <div class="form">
      A form
    </div>
  </div>
</div>
<div class="main-content">
  Main Content
</div>