Using CSS to crop an image with a combination of relative and absolute positioning

I'm working with the following HTML and CSS (Check out the 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><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>

The logo and menu are positioned on the left and right edges respectively, both displayed on top of the image. The message and caption are centered on top of the image...

Everything seems to be working fine so far. However, in some screen sizes, I need to crop the image.

I achieve this by placing the image in a DIV with negative margins (View the updated Fiddle Example):

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

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

However, as shown in the online example, moving the image causes shifts in the positions of the logo, main content, and menu...

Is there any solution to fix this issue?

htmlcss

Answer №1

One way to incorporate the image into CSS is by utilizing the 

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

declaration. Subsequently, you can resize it using the 

background-size: 999px ... ;

property.

Answer №2

For a better solution to your issue, consider adjusting the margin within the CSS for .slide .frame img or utilize the image as a background image in CSS with 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><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>

Answer №3

To crop the top and bottom of an image by 20px, apply negative margins to hide overflow from its parent element: 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>

Please note:

  • CSS used to have the clip(); rule for cropping content.

  • It is now recommended to use object-fit for images.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh choices for the user interface selection menu

I've successfully mastered the art of redefining options for Webix ui.richselect/ui.combo. The technique involves: richselect.getList().clearAll(); richselect.getList().parse(options_data) Now, I'm facing a challenge with changing options fo ...

javascripthtmlhtml-selectwebix

ReactJS allows for the use of immutable values while still being able to

In my current project, I have predefined values for yearOfEnforcementProceesdings + cityOfEnforcementProceedings. Additionally, there is a serialNumber input field that requires user input. The goal is to display two more unaltered values whenever the seri ...

javascripthtmlreactjsinputmaterial-ui

Track the cursor's movement

Looking to add an animation effect to my website. I want the navbar to follow the cursor within a limited space when hovered over. Check out this example for reference: . Here's the code I have so far, but it's not quite achieving the desired res ...

javascripthtmlcss

Developing jpg/png images from .ppt/pptx files with Django

I currently have a PowerPoint file saved on Dropbox at "". My goal is to convert this presentation file into individual slide images (jpg/png..) within my Django template or using a Django def function. Once I have converted the slides, I plan to utilize ...

pythonhtmldjango

Animating the fill of an SVG path

I am trying to fill a path that resembles a circle with color using animation. The color fill animation should follow a circular pattern, rather than filling from top to bottom or bottom to top. Here is my SVG code: <svg id="svg_circle" width="100%" ...

htmlcsssvgsvg-animate

Is there a way to enhance the appearance of a TextField in JavaFX to resemble the sleek design of Android or material UI?

Is there a way to create a window like this in JavaFX? Take a look at the textfield shown in the image below... I recently came across the Jphonex framework that allows for this type of display. However, when I package it into a Jar file and try to run it ...

androidcssjavafxscenebuilderscene

HTML and CSS - Aligning text and managing scrollbar visibility

I am currently diving into the world of coding and embarking on the journey of crafting a website for my father. This project not only helps me gain valuable experience but also builds up my portfolio. Utilizing unsemantic and normalize frameworks, I enco ...

htmlcss

Adjusting the transparency of the background without impacting the text itself

I've been struggling to create a loading screen with no luck. The animation itself looks fine, but the background is causing issues. Every time I try to adjust the opacity, it affects the text as well. @import url('https://fonts.g ...

css

Guide on how to show an icon in Meteor when a link is clicked

Is there a way to display a viewed icon upon clicking a link in Meteor? On my list of jobs page, when a user clicks on a job, they are taken to the description page. I would like to add an icon to the post indicating that the user has viewed it. ...

javascriptjqueryhtmlcssmeteor

What is the best way to position a button directly to the right of a text box with no space in

Is there a way to perfectly align a submit button to the right of a text or search box, matching the height of the search box, and eliminating any unwanted white space between them? This is my current setup: <input type="text" value="" placehold ...

htmlcsslayout

CSS fixed dynamically with JavaScript and multiple div elements placed randomly

Is it possible to dynamically change the position of multiple div elements on a webpage without reloading? I am looking for a way to modify the top and left positions of several divs, all with the same class, simultaneously. I want each div to have a diff ...

javascriptjquerycsshtml

Updating the hyperlink of an html element using css

I am looking to update this A tag <a href="contact.html" >Contact</a> to <a href="tel:+13174562564" >Contact</a> using only CSS, if possible. Alternatively, like this <a href="tel:+13174562564" >+13174562564</a> ...

htmlcsshref

Can an ID tag be used to dynamically change CSS content?

Is there a way to extract the IDs from HTML example: id="title1" so it can be used to display content in the CSS. <table class="layout display responsive-table"> <thead> <tr> <th class="th ...

htmlcss

I am looking to input and store the Kannada text used in my Angular project

I am facing an issue with my html form where I call an API to save text fields in a database. The problem arises when I type Kannada words in the text field, as when rendering the list, the Kannada fonts are displayed as ??. I am seeking a solution to thi ...

htmlangulartypescript

JavaScript unable to dynamically change CSS styles

I've been struggling to get the color updates working for a while now. My suspicion is that my string return may be invalid, causing the issue. I'm aiming to convert hours, minutes, and seconds into hexadecimal values, but it seems to be failing ...

javascripthtmlcsshex

Tips on moving information from one form to another after referencing the original page using Javascript and HTML

Imagine this scenario: A page with three text fields, each with default values. There is also a hyperlink that performs a database lookup and returns parameters to the same page where the hyperlink was clicked. The goal is for the text boxes to be automa ...

javascripthtmlperl

HTML, JavaScript, and PHP elements combine to create interactive radio buttons that trigger the appearance and disappearance of mod

On my page, I have multiple foreach loops generating divs with different information. These divs are displayed in modals using Bootstrap. However, I am encountering an issue where if I select a radio button and then close the modal and open another one, th ...

javascriptphpjqueryhtml

How to Make a Bootstrap Popover Close When Clicking Anywhere

Is this approach effective, or am I just overthinking it? Essentially, every click outside of the popover anchor or within the popover itself will hide all popovers. $("body").on('click', function(e) { if(!$(event.target).hasClass('with-pop ...

csstwitter-bootstrap

Issues with Bootstrap form functionality

I found inspiration on http://getbootstrap.com and decided to enhance it by including a hidden input. The file result.php contains $_REQUEST. Only the hidden value is visible to me. <form class="form-horizontal" role="form" action="/requests/result.p ...

phphtmltwitter-bootstrap

Creating a Cancel Button in JSP/HTML/JS/CSS Form: A Step-by-Step Guide

It is necessary to incorporate the functionality of "save" and "cancel" in the JSP code for this particular form. By selecting "save", the data entered into the form will be submitted to its intended destination. Alternatively, choosing "cancel" will dismi ...

javascriptjqueryhtmlcssjsp