Question

我有一个文章列表，希望它们的所有图像都具有相同的高度，以便文章标题垂直对齐。

我尝试为图像设置一个固定的高度（例如200像素），但这导致它们看起来被压缩了。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.article {
  margin-bottom: 24px;
  width: 100%;
}

.image {
  width: 100%;
  display: block;
  height: auto;
}

.article__category {
  margin: 12px 0;
  padding: 2px 4px;
  display: inline-block;
}

<article class="article">
  <div class="article__image">
    <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/ceremony.jpg" class="radius-small image">
    </a>
  </div>

  <div class="article__category radius-small">
    <a href="#">
      <span>New Track</span>
    </a>
  </div>

  <h1 class="article__title">
    <a href="#">Ceremony: <em>“Turn Away The Bad Thing” Video</em>
    </a>
  </h1>
</article>

<article class="article">
  <div class="article__image">
    <a href="#">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/joyero_copy.jpg" class="radius-small image">
    </a>
  </div>

  <div class="article__category radius-small">
    <a href="#">
      <span>Music Video</span>
    </a>
  </div>

  <h1 class="article__title">
    <a href="#">Joyero: <em>“Dogs” Video</em>
    </a>
  </h1>
</article>

我希望图像都具有相同的高度而不会破坏其比例。

Answer 1

好吧，您可以尝试一下...

最适合我

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.article {
  margin-bottom: 24px;
  width: 100%;
}

.image {
  width: 100%;
  display: block;
  height: auto;
}

.article__category {
  margin: 12px 0;
  padding: 2px 4px;
  display: inline-block;
}


/*
classes of images had spaces Probably that's why it's not working.
I have added - in images' classes
*/

.radius-small-image {
  height: 200px;
}

<!Doctype HTML>
<html>

<head></head>

<body>
  <article class="article">
    <div class="article__image">
      <a href="#">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/ceremony.jpg" class="radius-small-image">
      </a>
    </div>

    <div class="article__category radius-small">
      <a href="#">
        <span>New Track</span>
      </a>
    </div>

    <h1 class="article__title">
      <a href="#">Ceremony: <em>“Turn Away The Bad Thing” Video</em>
    </a>
    </h1>
  </article>

  <article class="article">
    <div class="article__image">
      <a href="#">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774776/joyero_copy.jpg" class="radius-small-image">
      </a>
    </div>

    <div class="article__category radius-small">
      <a href="#">
        <span>Music Video</span>
      </a>
    </div>

    <h1 class="article__title">
      <a href="#">Joyero: <em>“Dogs” Video</em>
    </a>
    </h1>
  </article>
</body>

</html>

Answer 2

您正在尝试在调整图像大小时保持图像的宽高比。为此，您只需要使用以下css属性：object-fit，它可以具有以下值：

fill：这是默认设置。替换内容的大小可填充元素的内容框。如有必要，将拉伸或压缩物体以使其适合
contain：缩放后的内容可以缩放以保持其纵横比，同时适合元素的内容框
cover：替换内容的大小可在填充元素的整个内容框时保持其纵横比。该对象将被裁剪以适合
none：替换的内容没有调整大小
scale-down：内容的大小就像未指定内容或包含内容一样（将导致较小的具体对象大小）

您可以检查这两个链接以选择正确的选择object-fit - CSS: Cascading Style Sheets | MDN和CSS object-fit Property w3schools

如何在不破坏比例的情况下使所有图像具有相同的高度

2 个答案: