Crop image using CSS whe using relative and absolute position - html

Question

I have the following HTML and CS(Fiddle Example):
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;
}
<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://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>
The logo and menu are on left and right both on top of image.
Message and caption and centered on top of image ...
So far so good. But in some screen sizes I need to crop the image.
I do it placing the image in a DIV with negative margins (Fiddle Example):
<div class="frame">
<img src="http://lorempixel.com/1200/675/nature/1" />
</div>
.slide .frame {
margin: -20px 0;
}
The problem is, as you can see in the online example, the logo, main content and menu are moved ...
Is there a way to solve this?

Answer 1

You can include the image in CSS using the
background-image:url('...')
property. Then you can crop it with the
background-size: 999px ... ;
attribute.

Answer 2

If I think better of your problem you have to set the margin .slide .frame img or you can use this image within CSS background-image:url('...')
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;
}
<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://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>

Answer 3

if you to crop the image of 20px top and bottom, apply the negative margins to it and hide overflow from its parent : 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>Home</li>
<li>About</li>
<li>Contact</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>
note that CSS
use to have the clip(); rules to crop content.
but now i would advise object-fit about image