I am attempting to dynamically align the images of two articles. The exact heights of the containers are not specified. Can anyone provide guidance on how to achieve this?

Question

I am attempting to dynamically align the images of two articles. The exact heights of the containers are not specified. Can anyone provide guidance on how to achieve this?

My code snippets:

<article class="featured">
    <img src="http://www.placehold.it/300x100/ff0000">
    <p>
        <!--Text-->
    </p>
</article>
<article class="sub-featured">
    <img src="http://www.placehold.it/300x100/00ff00">
    <p>
        <!--Text-->
    </p>
</article>
<article class="sub-featured">
    <img src="http://www.placehold.it/300x100/0000ff">
    <p>
        <!--Text-->
    </p>
</article>

Also, my SASS code:

body{
 margin:0;
 img{width:100%;}
 article.featured{
    p{width:50%;}
 }
 article.sub-featured{
    width:50%;
    margin-left:auto;
 }
}

This is the current state of my HTML:

https://i.sstatic.net/2IET4.png

I aim for it to resemble this design:

https://i.sstatic.net/OmvCW.png

The challenge here is achieving this design responsiveness across different screen sizes. The alignment I seek is having the bottom of the green image consistently align with the bottom of the red image regardless of the screen width. Applying position:relative or using CSS transformations won't suffice due to the unpredictable height of the articles.

Any assistance would be greatly appreciated!

css

Answer 1

Answer №1

Is this the desired format?

.redImage {
  position: relative;
}

.redImage img {
  width: 100%;
  height: auto;
}

article {
  width: 50%;
  z-index: 1;
  float: left;
  box-sizing: border-box;
  padding: 20px;
  overflow: visible;
  position: relative;
}

.specialImage {
  position: absolute;
  bottom: 100%;
  z-index: 1;
}

.specialImage img {
  width: 100%;
  height: auto;
}

body {
  margin: 0;
}

<div class="redImage">
  <img src="http://dummyimage.com/1200x3:1/f00/fff" />
</div>
<article>
  <h3>Introduction</h3>
  <p>The Alaskan Rolling Rock plans an escape from a sudsy IPA a flirty Dixie Beer. A grizzly beer greedily can be kind to a paternal Long Trail Ale. A sake bomb around a bud light, a PBR, and the frozen Budweiser are what made America great! A crazy pool
    table caricatures the mug. When a Sam Adams for a Dixie Beer self-flagellates, a Bacardi Silver returns home.</p>
</article>
<article>
  <div class="specialImage">
    <img src="http://dummyimage.com/1200x3:1/ccc/f00" />
  </div>
  <h3>A polar bear beer</h3>
  <p>When some Dixie Beer takes a coffee break, the optimal shot beams with joy. Any PBR can derive perverse satisfaction from an Octoberfest, but it takes a real Miller to wastedly recognize a scooby snack near the coors light. A milwakees best for a miller
    light ignores a chain saw. A psychotic Hazed and Infused buries a bill. An Ipswich Ale about a Stella Artois gives lectures on morality to a coors light of a scooby snack.
    <h3>The fried Red Stripe</h3>
    <p>Any Heineken can dumbly graduate from the porter living with the Rolling Rock, but it takes a real keg to knowingly bury a tooled Lone Star. A scooby snack negotiates a prenuptial agreement with a bar tab. An Amarillo Pale Ale beams with joy, because
      a Long Trail Ale of a Sam Adams requires assistance from another frozen bar tab. When a miller light near a PBR ceases to exist, the Imperial Stout about a booze ruminates. A beer gives the last beer to the power drill drink.</p>
</article>

If not, please provide further clarification.

Modify the dummyimgs ratios and observe that it consistently works (even when the small image's height exceeds the big image's height - the small image will have the head cropped in this unique scenario).

jsFiddle

Answer 2

Is this the desired format?

.redImage {
  position: relative;
}

.redImage img {
  width: 100%;
  height: auto;
}

article {
  width: 50%;
  z-index: 1;
  float: left;
  box-sizing: border-box;
  padding: 20px;
  overflow: visible;
  position: relative;
}

.specialImage {
  position: absolute;
  bottom: 100%;
  z-index: 1;
}

.specialImage img {
  width: 100%;
  height: auto;
}

body {
  margin: 0;
}

<div class="redImage">
  <img src="http://dummyimage.com/1200x3:1/f00/fff" />
</div>
<article>
  <h3>Introduction</h3>
  <p>The Alaskan Rolling Rock plans an escape from a sudsy IPA a flirty Dixie Beer. A grizzly beer greedily can be kind to a paternal Long Trail Ale. A sake bomb around a bud light, a PBR, and the frozen Budweiser are what made America great! A crazy pool
    table caricatures the mug. When a Sam Adams for a Dixie Beer self-flagellates, a Bacardi Silver returns home.</p>
</article>
<article>
  <div class="specialImage">
    <img src="http://dummyimage.com/1200x3:1/ccc/f00" />
  </div>
  <h3>A polar bear beer</h3>
  <p>When some Dixie Beer takes a coffee break, the optimal shot beams with joy. Any PBR can derive perverse satisfaction from an Octoberfest, but it takes a real Miller to wastedly recognize a scooby snack near the coors light. A milwakees best for a miller
    light ignores a chain saw. A psychotic Hazed and Infused buries a bill. An Ipswich Ale about a Stella Artois gives lectures on morality to a coors light of a scooby snack.
    <h3>The fried Red Stripe</h3>
    <p>Any Heineken can dumbly graduate from the porter living with the Rolling Rock, but it takes a real keg to knowingly bury a tooled Lone Star. A scooby snack negotiates a prenuptial agreement with a bar tab. An Amarillo Pale Ale beams with joy, because
      a Long Trail Ale of a Sam Adams requires assistance from another frozen bar tab. When a miller light near a PBR ceases to exist, the Imperial Stout about a booze ruminates. A beer gives the last beer to the power drill drink.</p>
</article>

If not, please provide further clarification.

Modify the dummyimgs ratios and observe that it consistently works (even when the small image's height exceeds the big image's height - the small image will have the head cropped in this unique scenario).

jsFiddle

I am attempting to dynamically align the images of two articles. The exact heights of the containers are not specified. Can anyone provide guidance on how to achieve this?

Answer №1

Similar questions

Attempting to locate the element's position using Selenium in Python

Embedding a video element results in an unexpected increase in height

Assorted dimensions of square grid

Cascading Style Sheets can be disrupted by Scalable Vector Graphics

Developing a unified input element containing numerous fields

Instructions on utilizing the CSSStyleSheet.insertRule() method for modifying a :root attribute

Ways to center text horizontally in a line with the help of bootstrap styles?

Spacing in CSS between the menu and its submenu elements

Switching the horizontal tab design from Bootstrap 3 to Bootstrap 4

Use the angular cli to incorporate the CSS styles found in the node_modules directory

Using jQuery, you can easily modify the color of a TD cell by applying the css properties assigned to the div element

Problem with animated scrolling in Jquery

Image swaps with timer for button

Do colors appear differently on various screens?

Steps for eliminating a column from a table

Contrasting box-shadow behavior observed in Chrome versus Firefox

css failing to load properly following javascript redirection

Issue with aligning the image product in Bootstrap 4

Switching to a dropdown navigation option

Click and Rotate for More Information