裁剪图像左，右

Question

我有以下的HTML（Fiddle Example）：

<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://via.placeholder.com/1200x400?text=Image to Crop" /> 
     </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：

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%; 
    margin: 0 -100px; 
}  
.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; 
} 

使用媒体查询我所需要的，有时候，通过裁剪调整图像它在左/右或底部/顶部：

.slide .frame img { 
    width: 100%; 
    margin: 0 -100px; 
}  

这并不改变图像。它只会改变它，如果我尝试上/下：

.slide .frame img { 
    width: 100%; 
    margin: -100px 0; 
}  

任何想法为什么？

Answer 1

您必须设置负利润率图像的容器，并设置图像宽度：100％

.slides { 
    width: 100%; 
    position: relative; 
    overflow: hidden; // so the "negative" part is not visible 
} 
.slide .frame { 
    margin: 0 -100px; 
}  
.slide .frame img { 
    width: 100%; 
} 

但是，也许你应该图像作为背景，并使用属性background-size: cover;和background-position: center;