css - 我正在尝试以响应方式对齐两篇文章的图像。容器的高度未知。我该怎么做呢？

Question

这是我的 html:

<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>

还有我的sass:

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

这是目前的 html:

但我希望它看起来像这样:

但要注意的是，当我缩小和展开屏幕时，我希望它看起来像那样——以便在所有屏幕宽度下，绿色图像的底部与红色图像的底部对齐。所以我不能简单地将 position:relative 应用于文章。而且我无法使用 CSS 转换，因为文章的高度未知。

感谢您的帮助!

Answer 1

像这样？

.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>

如果不是，请澄清。

更改 dummyimgs 比率，您会发现它始终有效(即使小图像的高度大于大图像的高度 - 在这种特殊情况下，小图像的头部将被裁剪)。

jsFiddle