使图片元素中的图像适合其容器

Question

我有以下代码：

​

#container {
  background: steelblue;
  width: 333px;
  height: 333px;
}

picture img {
  object-fit: cover;
}

<div id="container">
  <picture>
    <img src="http://placekitten.com/g/300/300" alt="kitten">
  </picture>
</div>

​

我怎样才能把这张照片装进集装箱箱？

这是一个代码库。

Answer 1

您必须在“图片”元素中使用display:flex (与“img”的object-fit属性一起使用)

对于任何大小的容器，这都是可行的。

就像这样：

​

#container {
  background: steelblue;
  width: 333px;
  height: 500px;
  
}
picture {
  width: 100%;
  height: 100%;
  display: flex;
 
}
picture img {
 object-fit: cover; 
    height: auto;
    width:100%;
}

<div id="container">
  <picture>
    <img src="http://placekitten.com/g/300/300" alt="kitten">    
  </picture>
</div>

​

Answer 2

只需向您的img添加一个width: 100%;即可。如果两者都是正方形，它将适合容器。

Answer 3

您必须同时拉伸图片和img元素：

#container {
  background: steelblue;
  width: 333px;
  height: 333px;
}

picture, img {
  width: 100%;
  height: 100%;
}