title: Crop image on left and right
body: <p>I have the following HTML (<a href="http://jsfiddle.net/pwnhmp5r/5/" rel="nofollow noreferrer">Fiddle Example</a>):</p>
  
  <pre><code>&lt;header&gt;
    &lt;div class="wrapper"&gt;
      &lt;em class="brand"&gt;
        &lt;img src="http://via.placeholder.com/200x40?text=LOGO"/&gt;
      &lt;/em&gt;
      &lt;nav class="menu"&gt;
        &lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
    &lt;div class="slides"&gt;
      &lt;div class="slide"&gt;
        &lt;div class="frame"&gt;
          &lt;img src="http://via.placeholder.com/1200x400?text=Image to Crop" /&gt;
        &lt;/div&gt;      
        &lt;div class="text"&gt;
          &lt;h2&gt;Our Message&lt;/h2&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;main&gt;
    Main content
  &lt;/main&gt;
  </code></pre>
  
  <p>And correspondent CSS:</p>
  
  <pre><code>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;
   }
  </code></pre>
  
  <p>Using media queries I need, sometimes, to adjust the image by cropping it on Left/Right or on Bottom/Top:</p>
  
  <pre><code>.slide .frame img {  
    width: 100%;
    margin: 0 -100px;  
  }    
  </code></pre>
  
  <p>This does not change the image. It only changes it if I try Top/Bottom:</p>
  
  <pre><code>.slide .frame img {  
    width: 100%;
    margin: -100px 0;  
  }    
  </code></pre>
  
  <p>Any idea why?</p>