图像未正确对齐

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

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

Answer 1

图片的纵横比略有不同。如果您将 height: 100%; width: 100%; 分配给两者（两者只需要 height: 100%; 即可在底部对齐，但同时使用 height/width 因此它在演示中的元素中看起来大小合适），那么它们按预期对齐，但 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 */

所以您在 fiddle 中的问题可以通过将 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

图像未正确对齐

images are not aligning correctly

html

css

image

image-resizing

image-size