主页 / 问题 / 744652
Accepted
Илья Бизунов
Asked:2020-11-14 22:57:30 +0000 UTC2020-11-14 22:57:30 +0000 UTC

如何在 CSS 中将所有图像裁剪到其中一个的最小高度？

  • 772

.photos-line {
  column-count: 6;
  column-gap: 1em;
}

.photos-line .photo img {
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}
<div class="photos-line">
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/22860491_293564051135946_1431999210961502208_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/23347493_138848026766173_4147715403113562112_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/23498171_1512204415482005_7319427710441226240_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/22802639_866024183566278_671520314278019072_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/22857687_133137560679761_5651001970152964096_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/22710622_149419199004478_4851274197734785024_n.jpg">
  </div>
</div>

在此示例中，图像具有不同的高度。问题 - 如何使其相同（最小）？

css

1 个回答

  1. Best Answer

    例子

    .photos-line {
  column-count: 6;
  column-gap: 1em;
}

.photos-line .photo {
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
  height: 0;
}

.photos-line .photo img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <div class="photos-line">
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/22860491_293564051135946_1431999210961502208_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/23347493_138848026766173_4147715403113562112_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/23498171_1512204415482005_7319427710441226240_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/22802639_866024183566278_671520314278019072_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/22857687_133137560679761_5651001970152964096_n.jpg">
  </div>
  <div class="photo">
    <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/22710622_149419199004478_4851274197734785024_n.jpg">
  </div>
</div>

    • 3

相关问题