html - 图像未正确对齐

Question

我的一个页面上有两个并排的全宽图像。它们工作完美，除了它们没有在底部对齐(你看到右图比左图略高)。有办法解决这个问题吗？

html

<div class="food-featured-posts">

  <div class="food-featured-posts-first">
    <?php query_posts( 'p=185'); while (have_posts()): the_post(); ?>
      <div class="food-wrapper"><?php the_post_thumbnail(); ?>
          <div class="popular-sticker">Popular</div></div>
      <div class="food-featured-posts-info">
      <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <?php get_template_part( 'share-buttons' ); ?>
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
      </div></div>

  <?php endwhile; ?>


  <div class="food-featured-posts-second">
    <?php query_posts( 'p=173'); while (have_posts()): the_post(); ?>
      <div class="food-wrapper"><?php the_post_thumbnail(); ?>
          <div class="popular-sticker">Popular</div></div>
      <div class="food-featured-posts-info">
      <h2><a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="post-excerpt"><?php echo get_the_excerpt(); ?></p>
            <?php get_template_part( 'share-buttons' ); ?>
            <a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
            <?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'comment-count', 'none'); ?>
      </div></div>
  <?php endwhile; ?>

</div>

CSS

.food-featured-posts-first img {
  width: 100%;
    height:auto;
}
.food-featured-posts-second img {
  width: 100%;
    height:auto;
}
.food-featured-posts-first  {
  width: 50%;
}
.food-featured-posts-second  {
  width: 50%;
}
.food-featured-posts {
    display: flex;
    margin-bottom: 200px;
    margin-top:125px;
}

改用 img 标签 - https://jsfiddle.net/v90pug4o/4/

Answer 1

图片的纵横比略有不同。如果您分配 height: 100%; width: 100%; 到两者(只有 height: 100%; 是两者在底部对齐所必需的，但同时使用高度/宽度，所以它在元素中看起来大小合适你的演示)，然后它们按预期对齐，但 1)它会稍微改变纵横比，2)如果我记得这个问题之前已经发布过，这在 Safari 中不起作用。我仍然不确定为什么。 Safari 似乎不允许您在图像上强制采用与原始图像不同的纵横比。

img {
  display: block;
  height: 100%;
  width: 100%;
}
.food-featured-posts-first  {
  width: 50%;
}
.food-featured-posts-second  {
  width: 50%;
}
.food-featured-posts {
    display: flex;
    margin-bottom: 200px;
    margin-top:125px;
}

<div class="food-featured-posts">

  <div class="food-featured-posts-first">
  <img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ >
  </div>


  <div class="food-featured-posts-second">
  <img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ >
  </div>

</div>