Question

我有以下HTML和CS（Fiddle Example）：

＆＃13;

header {
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  max-width: 640px;
  text-align: left;
  position: relative;
}

em.brand img {
  display: block;
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
  display: inline-block;
  margin: 0;
  padding: 8px;
}

ul.menu li a {
  text-decoration: none;
  font-size: 18px;
  color: white;
}

em {
  border: 1px solid red;
  position: absolute;
  z-index: 2000;
}

nav {
  position: absolute;
  z-index: 2000;
  right: 0;
}

.slides {
  width: 100%;
  position: relative;
}

.slide .frame img {
  width: 100%;
}

.slide .text {
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;
}

.slide .text h2 {
  color: white;
  font-size: 40px;
  margin: 8px;
}

.slide .text p {
  color: white;
  font-size: 20px;
  margin: 8px;
}

main {
  border: 1px solid red;
  font-size: 20px;
}

＆＃13;

<header>
  <div class="wrapper">
    <em class="brand">
          <img src="http://via.placeholder.com/200x40?text=LOGO"/>
        </em>
    <nav class="menu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class="slides">
    <div class="slide">
      <div class="frame">
        <img src="http://lorempixel.com/1200/675/nature/1" />
      </div>
      <div class="text">
        <h2>Our Message</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
</header>
<main>
  Main content
</main>

＆＃13;

徽标和菜单位于图像顶部的左右两侧。消息和标题，并以图像顶部为中心......

到目前为止一切顺利。但在某些屏幕尺寸中，我需要裁剪图像。

我将图像放在具有负边距（Fiddle Example）的DIV中：

<div class="frame">
  <img src="http://lorempixel.com/1200/675/nature/1" />
</div> 

.slide .frame {
  margin: -20px 0;
}

问题是，正如您在在线示例中所看到的，徽标，主要内容和菜单已被移动......

有没有办法解决这个问题？

Answer 1

您可以使用

将图像包含在CSS中

background-image:url('...')

属性。然后你可以用

裁剪它

background-size: 999px ... ;

属性。

Answer 2

如果我更好地考虑您的问题，您必须设置边距.slide .frame img，或者您可以在CSS background-image:url('...')中使用此图片

＆＃13;

header {
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  max-width: 640px;
  text-align: left;
  position: relative;
}

em.brand img {
  display: block;
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {  
  display: inline-block;
  margin: 0;
  padding: 8px;
}

ul.menu li a {
  text-decoration: none;
  font-size: 18px;
  color: white;
}

em {
  border: 1px solid red;
  position: absolute;
  z-index: 2000;
}

nav {
  position: absolute;
  z-index: 2000;
  right: 0;
}

.slides {
  width: 100%;
  position: relative;
}
.slide .frame img {  
  margin: -20px 0;
  width: 100%;
}

.slide .text {
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;
}

.slide .text h2 {
  color: white;
  font-size: 40px;
  margin: 8px;
 }
 
.slide .text p {
  color: white;
  font-size: 20px;
  margin: 8px;
 } 

main {
  border: 1px solid red;
  font-size: 20px;
  position: relative;
  top: 20px;
}

＆＃13;

<header>
  <div class="wrapper">
    <em class="brand">
      <img src="http://via.placeholder.com/200x40?text=LOGO"/>
    </em>
    <nav class="menu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class="slides">
    <div class="slide">
      <div class="frame">
        <img src="http://lorempixel.com/1200/675/nature/1" />
      </div>      
      <div class="text">
        <h2>Our Message</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
</header>
<main>
  Main content
</main>

＆＃13;

Answer 3

如果要裁剪20px顶部和底部的图像，请对其应用负边距并隐藏其父级溢出：http://jsfiddle.net/hxdhv147/6/

header {
  text-align: center;
}

div.wrapper {
  margin: 0 auto;
  max-width: 640px;
  text-align: left;
  position: relative;
}

em.brand img {
  display: block;
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {  
  display: inline-block;
  margin: 0;
  padding: 8px;
}

ul.menu li a {
  text-decoration: none;
  font-size: 18px;
  color: white;
}

em {
  border: 1px solid red;
  position: absolute;
  z-index: 2000;
}

nav {
  position: absolute;
  z-index: 2000;
  right: 0;
}

.slides {
  width: 100%;
  position: relative;
}

.slide .frame {overflow:hidden}
.slide .frame  img {  
  width: 100%;
  margin: -20px 0;
}
.slide .text {
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;
}

.slide .text h2 {
  color: white;
  font-size: 40px;
  margin: 8px;
 }
 
.slide .text p {
  color: white;
  font-size: 20px;
  margin: 8px;
 } 

main {
  border: 1px solid red;
  font-size: 20px;
}

<header>
  <div class="wrapper">
    <em class="brand">
      <img src="http://via.placeholder.com/200x40?text=LOGO"/>
    </em>
    <nav class="menu">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class="slides">
    <div class="slide">
      <div class="frame">
        <img src="http://lorempixel.com/1200/675/nature/1" />
      </div>      
      <div class="text">
        <h2>Our Message</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </div>
</header>
<main>
  Main content
</main>

请注意CSS

使用clip();规则裁剪内容。
但现在我会建议object-fit关于图片

使用CSS使用相对和绝对位置裁剪图像

3 个答案: