What is the best way to maximize an image's height evenly outside of its full-width container?

Is it possible to extend an image beyond its parent container on both the top and bottom while maintaining responsiveness and containing remaining content within the parent? I've managed to achieve this effect on the top but struggle with the bottom. Any suggestions on how to accomplish this without breaking the grid layout?

I experimented with absolute positioning, which caused layout issues. Negative margins worked for the top extension but not the bottom. Here is a basic code snippet of what I have so far available on jsfiddle:

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
}

.col {
  width: 50%;
}

.col-image {
  margin-top: -20px;
}

p {
  padding: 20px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}
<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="col col-image">
        <img src="https://via.placeholder.com/800x450?text=fpo">
      </div>
    </div>
  </div>
</div>

htmlimagecss

Answer №1

Here's an alternative approach utilizing negative margins and absolute positioning for the image:

  • Apply negative margins to adjust the position of the second column,

  • Employ absolute positioning for the image in the second column to ensure its height is determined by the left column (due to the default setting of align-items: stretch in the flexbox container), and

  • Utilize object-fit: cover to preserve the aspect ratio of the image.

Check out the example demo below:

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
}

.col {
  width: 50%;
}

.col-image {
  margin: -20px 0 -20px 0; /* negative margin */
  position: relative;
}

p {
  padding: 20px;
}

img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* absolute positioning */
  position: absolute;
  top: 0;
  left: 0;
}
<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="col col-image">
        <img src="https://via.placeholder.com/800x450?text=fpo">
      </div>
    </div>
  </div>
</div>

Answer №2

It appears that the positioning is effective in this case

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
  position: relative;
}

.col {
  width: 50%;
}

.col-image {
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: 50%
}

p {
  padding: 20px;
}

img {
  display: block;
  height: 100%;
}
<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="col col-image">
        <img src="https://via.placeholder.com/800x450?text=fpo">
      </div>
    </div>
  </div>
</div>

Answer №3

Another way to experiment with the appearance of the band element is by adjusting its background settings.

.band {
  background: 
    url(https://via.placeholder.com/800x450?text=fpo) calc(50% + 160px) 0/auto 100%,
    linear-gradient(#ddd,#ddd) center/100% calc(100% - 40px);
  background-repeat:no-repeat;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.col {
  width: 50%;
}

p {
  padding:40px 20px;
}
<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</div>

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

Experiencing difficulties with JSoup on Android for HTML parsing

I recently started working on a fun little project to scrape data (specifically XKCD comics) from the internet and display it on my phone. This is my first time delving into Android development, and since I'm not too familiar with Java, I'm keepi ...

javahtmlandroidjsoup

Could someone please advise me on how to prevent the second animation from being overridden?

After attempting to separate the animations with a comma and placing them on the same transform, I am still encountering issues. * { margin: 0px; padding: 0px; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .container { ...

htmlcssanimationcss-animationskeyframe

How can I change the transparency of a CSS background color using JavaScript?

I have a question about CSS: .class1 { background: #fff } Now, I need to achieve the following: .class2 { background: rgba(255,0,0,0.5) }; Is there a way to use JavaScript only to change the background property of .class1 and give it an opacity of 0.5? ...

javascriptcss

Error with the jQuery scrolling plugin

Currently, the script is set up this way: jQuery(document).ready(function(){ var windheight = jQuery(window).height(); var windTop = jQuery(window).scrollTop(); var windbottom = windheight + windTop ; jQuery.fn.revealOnScroll = function(){ return this.e ...

javascriptjqueryhtmlcss

Tips for adding a border to a 3D pie chart in Highcharts

I created a 3D pie chart using the Highchart plugin and wanted to add borders to each portion. I tried adding the following code: borderWidth: 4, borderColor: "red" within the plotOptions: pie: section. However, I noticed that the portions were getting b ...

javascriptjqueryhtmlcsshighcharts

Utilizing LESS for Mixing

I've been diving into the official LESS documentation (version 1.5) and I'm struggling to grasp how I can import a reference to another CSS file to utilize its content in my own stylesheet. For instance: stylesheet.less @import (reference) "boo ...

csstwitter-bootstraplessmixins

Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...

htmlcss

Ways to find the image source using JavaScript/Jquery upon page loading?

I've scoured countless forums, yet a viable solution still eludes me. My objective is simple - upon page load, I want to gather all elements with the ".home" class and store them in an array called arr. Subsequently, the script should iterate through ...

javascriptjqueryhtmlcss

Gallery of Disappearing Images

I am encountering issues with the image gallery on my website, as it seems to create a space to the right when viewed on screens smaller than 350px. This results in a gap on the entire right side of the page. My goal is to make this image gallery responsiv ...

htmlcsshtml5-canvas

Utilize a function within styled-components

I am looking to dynamically adjust the font size of a button based on the length of a passed-in prop. However, I can't use a dynamic width due to a custom animation applied to the component. Here is my current code: const checkLength = () => { i ...

cssreactjsstyled-components

Generating a clickable link for the URL included in a tweet message

As someone who is just starting out in coding, I could really use some help. Currently, I am using node.js to fetch tweet text and displaying it using html. I would like to add a hyperlink for the URLs within the text. For example: #Times #News Ukrainians ...

jqueryhtmlnode.js

Guide to designing a progress bar using numerical data stored in a database

I am currently working on a project to create a dynamic progress bar based on numeric values stored in a database. The database has two fields, 'NEXT_STEP' and 'MAX_STEPS'. When the value of NEXT_STEP reaches MAX_STEPS + 1, it indicates ...

phphtmlajaxoracle

Combining PHP and Javascript for a single form submission to two different forms

Have you come across these discussions? submit a form inside another form Submitting form data to two locations using Javascript and PHP? Unfortunately, neither of them provides a satisfactory answer to the question. Allow me to paint the picture for ...

javascriptphpjqueryhtmlforms

Align dropdown menus vertically in Bootstrap

Issue: Struggling to vertically align multiple dropdown menus in Bootstrap. Currently, the left side of the navbar is properly aligned but not the right side. Seeking advice on how to approach this problem and find a solution. Code Example: <h ...

htmlcsstwitter-bootstrapdrop-down-menuvertical-alignment

Tips for aligning text alongside ons-select elements

I am working with the following HTML snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://u ...

htmlonsen-ui

Cover the entire screen with a solid background color and adjust the text size accordingly

I'm encountering two issues. Despite my efforts to adjust multiple containers, the background colour #eee simply won't reach the bottom of the screen. I've even tried setting the HTML height to 100%, but to no avail. Even though I&apos ...

htmlcsstwitter-bootstrap

Extracting IDs, classes, and elements from a DOM node and converting it into a string format

Can someone please guide me on how to extract the DOM tree string from an element? Let's consider this HTML structure: <div> <ul id="unordered"> <li class="list item">Some Content</li> </u ...

javascripthtml

Text Module of the Divi theme

Issue Resolved (After noticing that Divi was adding padding twice to <ul>'s in their footer and Text Module, I created a new class to remove the padding-bottom from the sub-list item.) In a Divi text module, I created an unordered list with a s ...

csshtml-listsdivi-theme

Encountering issues with the functionality of my Bootstrap navbar

After diving into the world of bootstrap, I encountered some challenges with the navigation bar in mobile view. Despite adding a navbar and a toggle button, it doesn't seem to be functioning correctly. Following tutorials and examples meticulously, bu ...

htmlcssbootstrap-4

Guide to effortlessly convert SCSS to CSS using an automatic vendor prefixer

Is there a tool that can convert SCSS to CSS while automatically adding vendor prefixes? I've tried using node-sass with npm, which worked well, but it doesn't add prefixes like box-sing: border-box; or display: flex; properties. Note: I also tr ...

cssnode.jsnpmsass