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>

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

以下是非裁剪版JSFiddle example的HTML和CSS：

.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才能获得逻辑正确。

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

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

＆＃13;

.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 {}

＆＃13;

<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>

＆＃13;

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

1 个答案: