Crop image on left and right - html

Question

I have the following 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>Home</li>
<li>About</li>
<li>Contact</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>
And correspondent 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;
}
Using media queries I need, sometimes, to adjust the image by cropping it on Left/Right or on Bottom/Top:
.slide .frame img {
width: 100%;
margin: 0 -100px;
}
This does not change the image. It only changes it if I try Top/Bottom:
.slide .frame img {
width: 100%;
margin: -100px 0;
}
Any idea why?

Answer 1

You have to set up the negative margins to the image's container, and set the image width: 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%;
}
But maybe you should the image as a background and use the property background-size: cover; and background-position: center;