时间戳

首页 > 解决方案 > 包含父级的图像大小

html - 包含父级的图像大小

问题描述

我一直试图让我的图像在同一条线上彼此相邻，如果需要，只需将它们裁剪成更小的尺寸。为什么不起作用object-fit？

HTML：

<div class="gallery">
  <div class="inner"><img src="images/image1.jpg"></div>
  <div class="inner"><img src="images/image2.jpg"></div>
  <div class="inner"><img src="images/image3.jpg"></div>
</div>

CSS：

.gallery{
  width: 1000px;
  height: 300px;
  display: flex;
}

.inner{
   width: 333px;
   height: 300px;
}

.inner img{
   object-fit: contain;
}

标签： htmlcssimageflexboxobject-fit

解决方案

您应该设置widthandheight以便img与object-fit. 它看起来object-fit: cover;可能就是你所追求的。

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

完整片段：

.gallery {
  width: 1000px;
  height: 300px;
  display: flex;
}

.inner {
  flex: 0 0 33.333333%;
  /*or flex: 1; */
  /*or width: 33.333333%; */
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="gallery">
  <div class="inner"><img src="https://picsum.photos/300/300"></div>
  <div class="inner"><img src="https://picsum.photos/400/600"></div>
  <div class="inner"><img src="https://picsum.photos/600/400"></div>
</div>

推荐阅读