使用 CSS 调整图像大小以具有相同的高度答案

【问题标题】：Resizing Images to have the same Height with CSS使用 CSS 调整图像大小以具有相同的高度
【发布时间】：2020-05-15 07:00:30
【问题描述】：

我正在尝试调整图像的大小以使其具有相同的高度，但我不知道我做错了什么。我尝试添加最小高度，最大高度，具有固定高度（不是我的目标），但仍然无法弄清楚出了什么问题。看看中间的标志是如何比其他标志短的。另外，我怎样才能让标志图像的顶部有圆角？现在他们正在隐藏边界，因为他们在顶部。

这是我的代码

<template>
  <div class="home">
    <div class="content">
      <div
        class="country_card"
        v-for="country in countries"
        :key="country.name"
        @click="goToPage(`${country.name}`)"
      >
        <div class="country_flag">
          <img v-bind:src="country.flag" alt="Flag" />
        </div>
        <div class="country_info">
          <h3>{{country.name}}</h3>
          <div>
            <h5>
              <span>Population:</span>
              {{country.population.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
            </h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countries: null,
    };
  },
  beforeCreate() {
    axios.get("https://restcountries.eu/rest/v2/all").then(response => {
      this.loading = false;
      this.countries = response.data;
    });
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20px 50px 20px 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 75px;
}

.country_card {
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 1px 4px 6px 1px rgba(0, 0, 0, 0.1);
}

.country_flag {
  img {
    width: 100%;
    height: auto;
  }
}

.country_info {
  padding: 20px 10px 20px 20px;
  h5 {
    font-weight: 500;
    font-size: 14px;
    margin: 0;
    &:last-child {
      margin-bottom: 30px;
    }
  }
  span {
    font-weight: 800;
  }
}
</style>

【问题讨论】：

您希望如何调整大小？裁剪还是拉伸？
没关系，因为有些更短，有些更大。只要它们的大小都一样。
一些标志会被剪掉，可以吗？

标签： css vue.js

【解决方案1】：

这是因为图像是内联元素，所以首先要将它们显示为块状。

img{
  display: block;
  width: 100%;
  height: 140px; //whatever you want
}

现在您可以根据需要设置样式。至于圆角，你只需要隐藏溢出即可

【讨论】：

我不想添加固定高度，还有其他选择吗？