如何在保持比例的同时用图像填充div？

Question

我找到了这个主题 - 如何在保持图像宽高比的同时拉伸图像以填充<div>？ - 这不完全是我想要的东西.

我有一个特定大小的div和里面的图像.无论图像是横向还是纵向,我都希望始终用图像填充div.如果图像被切断(div本身隐藏了溢出)并不重要.

因此,如果图像是肖像我希望它width是100%,height:auto所以它保持成比例.如果图像是风景我想要的height是100%和width to beauto`.听起来很复杂吧？

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

由于我不知道该怎么做,我只是简单地创建了我的意思的快速图像.我甚至无法正确描述它.

所以,我想我不是第一个问这个的人.但是我无法真正找到解决方案.也许有一些新的CSS3方式这样做 - 我想的是flex-box.任何的想法？也许它比我预期的要容易得多？

Answer 1

如果我正确理解了您想要的内容,您可以将宽度和高度属性保留在图像上以保持纵横比,并使用flexbox为您进行居中.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddle在这里

我在IE9,Chrome 31和Opera 18中成功测试了这个.但没有其他浏览器经过测试.一如既往,您必须考虑您的特定支持要求.

Answer 2

这有点晚了,但我遇到了同样的问题,最后在另一个stackoverflow帖子(/sf/answers/2037215001/)的帮助下解决了这个问题.

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

希望这仍然有助于某人.

Ps:还与max-height,max-width,min-width和min-height css属性一起使用.使用100%或100vh/100vw等长度单位来填充容器或整个浏览器窗口,这是非常方便的.

Answer 3

下面的所有答案都有固定的宽度和高度，这使得解决方案“没有响应”。

为了实现结果但保持图像响应，我使用了以下内容：

1. 在容器内放置所需比例的透明 gif 图像
2. 使用要调整大小和裁剪的图像提供图像标记内联 css 背景

HTML：

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}?

Answer 4

我想出的一个简单方法是object-fit: cover在容器内的 img 上使用

<div class="container"> 
  <img class="image" src="https://mymodernmet.com/wp/wp-content/uploads/2020/11/International-Landscape-Photographer-Year-PhotographER-1st-KelvinYuen-2.jpg">
</div>

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

.container {
  height: 100px; /*Set any dimensions you like*/
  width: 50px;
}

据我测试，无论要使用的图像尺寸如何，这都有效，并且这满足您在问题中所述的“最佳情况”，因为结果是垂直和水平居中的。

Answer 5

一个老问题,但值得更新,因为现在有一种方法.

正确的基于CSS的答案是使用object-fit: cover,其工作原理如下background-size: cover.定位将由object-position属性处理,属性默认为居中.

但是在任何IE/Edge浏览器或Android <4.4.4中都不支持它.此外,object-positionSafari,iOS或OSX不支持.Polyfill确实存在,对象拟合图像似乎提供了最好的支持.

有关该属性如何工作的更多详细信息,请参阅CSS技巧文章以object-fit获取解释和演示.

Answer 6

这应该这样做:

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}

Answer 7

您可以使用 css flex 属性来实现这一点。请看下面的代码

.img-container {
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}

<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

Answer 8

您应该在 img 标签上使用 CSS 属性object-fit ：

<div class="container">
  <img src="some-image.jpg" style="width: 100%; height: 100%; object-fit: cover" />
</div>

Answer 9

考虑将background-size: cover(IE9+) 与background-image. 对于 IE8-，有一个polyfill。