Question

我的一个页面上有两张全宽图像。它们完美地工作，除了它们没有在底部对齐的事实（你看到右图像稍微高于左图）。有办法解决这个问题吗？

HTML

＆＃13;

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

＆＃13;

CSS

＆＃13;

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

＆＃13;

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

Answer 1

图像的纵横比略有不同。如果您为两者分配height: 100%; width: 100%;（两者都需要height: 100%;才能在底部对齐，但同时使用高度/宽度使其在演示中的元素中看起来很合适），那么它们会对齐为虽然1）它会稍微改变宽高比，2）如果我记得此问题已经发布过，而且这在Safari中不起作用。我还不确定为什么。 Safari似乎不允许您在图像上强制使用与原始图像不同的宽高比。

＆＃13;

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

＆＃13;

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

＆＃13;

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

图片未正确对齐

2 个答案: