时间戳

首页 > 解决方案 > 如何在不破坏比例的情况下使所有图像高度相同

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

问题描述

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

我尝试为图像设置一个固定的高度，例如 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>

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

标签： htmlcss

解决方案

嗯，你可以试试这个...

非常适合我

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

推荐阅读