使图片元素中的图像适合其容器 [英] Make image in picture element fit its container

问题描述

我有以下代码:

#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>

如何将图片填充到容器盒中?

How can I get the picture to fill the container box?

这是一个Codepen .

推荐答案

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

You have to use display:flex in 'picture' element (in conjunction with object-fit property for the 'img')

此方法适用于任何尺寸的容器.

This will work, for any size of the container.

像这样:

#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>

这篇关于使图片元素中的图像适合其容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！