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

时间：2013-01-03 15:54:22

标签： css image css3 positioning flexbox

我找到了这个帖子 - How do you stretch an image to fill a <div> while keeping the image's aspect-ratio? - 这不完全是我想要的。

我有一个具有一定大小的div和里面的图像。无论图像是横向还是纵向，我都希望始终用图像填充div。如果图像被截断并且无关紧要（div本身已隐藏溢出）。

因此，如果图像是纵向的，我希望width为100%，height:auto使其保持成比例。如果图片是横向的，我希望height为100%和width to be自动`。听起来很复杂吧？

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

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

enter image description here

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

17 个答案:

答案 0 :(得分：118)

如果我正确理解了您的需求，您可以将宽度和高度属性保留在图像上以保持纵横比，并使用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 here

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

答案 1 :(得分：31)

有点晚了，但我遇到了同样的问题，最后在另一个stackoverflow帖子（https://stackoverflow.com/a/29103071）的帮助下解决了这个问题。

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

希望这对某些人有帮助。

Ps：还可以与 max-height ， max-width ， min-width 和 min-height css属性。使用 100％或 100vh / 100vw 等长度单位填充容器或整个浏览器窗口非常方便。

答案 2 :(得分：7)

一个老问题，但值得更新，因为现在有办法。

正确的基于CSS的答案是使用object-fit: cover，其作用类似于background-size: cover。定位将由object-position属性处理，默认为居中。

但在任何IE / Edge浏览器或Android＆lt; 4.4.4。此外，Safari，iOS或OSX不支持object-position。 Polyfill确实存在，object-fit-images似乎提供了最好的支持。

有关该属性如何工作的更多详细信息，请参阅CSS Tricks article on object-fit以获取解释和演示。

答案 3 :(得分：6)

这应该这样做：

int main(int argc, char *argv[])

答案 4 :(得分：2)

考虑将background-size: cover（IE9 +）与background-image结合使用。对于IE8-，有一个polyfill。

答案 5 :(得分：2)

以下是使用object-fit对IE的支持的答案，因此您不会丢失比率

使用简单的JS代码段检测是否支持object-fit，然后将img替换为svg 

//ES6 version
if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('img[data-object-fit]').forEach(image => {
      (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
      image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
    })
  })
}

//ES5 version
if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', function() {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]').forEach(function(image) {
      (image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit'));
      image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
    }));
  });
}
img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}


/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}
<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

注意：还有一些object-fit填充物可以使object-fit起作用。

以下是一些示例：

答案 6 :(得分：2)

您可以使用CSS的flex属性来实现。请参见下面的代码

.img-container {
  width: 150px;
  height: 150px;
  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>

答案 7 :(得分：2)

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

要获得结果但保持图像响应速度，我使用了以下方法：

  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;
}​

答案 8 :(得分：2)

您可以使用div来实现此目的。没有img标签:)希望这有帮助。

＆＃13;
＆＃13; 
.img{
	width:100px;
	height:100px;
	background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
.img1{
	width:100px;
	height:100px;
	background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	border:1px solid red;
	background-size:cover;
}
＆＃13; 
<div class="img">	
</div>
<div class="img1">	
</div>
＆＃13;
＆＃13;
＆＃13;

答案 9 :(得分：2)

试试这个：

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

希望这有帮助

答案 10 :(得分：1)

我达到描述的“最佳情况”方案的唯一方法是将图像作为背景：

IMyClass
<div class="container"></div>​

答案 11 :(得分：1)

这里有你的工作实例。我使用了一个技巧，将图像设置为div容器的背景，背景大小为：cover和background-position：center center

我放置了宽度为100％的图像，不透明度为0，使其不可见。请注意，我只显示我的图像，因为我对调用子点击事件特别感兴趣。

请注意，我正在使用角度，这完全无关紧要。 

var user = LoggeInUser(); // some user who is loggedIn now
$scope.approve = function(request){
            var currentUserComment = request.comments.filter(function(comm)                        {
            return comm.userId == user.id && comm.status == "Pending";
        })[0];
    currentUserComment.status = State.APPROVED; // change comments Status

    Comments.update(currentUserComment, function() { // send PUT request to API
        // $rootScope.$broadcast('daysUpdated');   
    });
}

结果是您在所有情况下定义为最佳的结果

答案 12 :(得分：1)

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

<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;
}

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

答案 13 :(得分：0)

CSS object-fit: cover和object-position: left center属性值现在解决了这个问题。

答案 14 :(得分：0)

.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
<div class="image-wrapper">
  <img src="">
</div>

答案 15 :(得分：0)

只需固定图像的高度并提供width = auto 

img{
    height: 95vh;
    width: auto;
}

答案 16 :(得分：-1)

不，没有针对CSS3的解决方案。但是，您链接的问题top answer是第二好的。

相关问题
最新问题