图像未正确对齐

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>

Answer 2

在 flex 中设置项目垂直对齐的标准方法是使用align-self，如下所示：

align-self: flex-start; /* vertical align = top */
align-self: flex-end;   /* vertical align = bottom */

因此，您可以通过将 align-self: flex-end; 添加到子 div .food-featured-posts-first 和 .food-featured-posts-second 来轻松解决您的问题，如下所示：

.food-featured-posts-first  {
  width: 50%;
  align-self: flex-end;
}

.food-featured-posts-second  {
  width: 50%;
  align-self: flex-end;
}

我已经对其进行了测试，并且可以正常工作。 see this fiddle