How can I fill a div with an image while keeping i

我发现这个话题- 你如何拉伸图片，以填补一个<div>，同时保持图像的宽高比？ - 这不完全是我想要的东西。

我有一定的规模和它内部的图像的股利。 我要永远填出与图像的DIV不管图像是横向或纵向。 而且它并不重要，如果图像被切断（在div本身已经溢出隐藏）。

因此，如果图像是人像我想要的width为100%和height:auto ，使其保持在比例。 如果图像是风景我想要的height是100%而width to be auto`。 听起来很复杂吧？

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

因为我不知道该怎么做，我只是创造了什么，我的意思是一个快速的图像。 我甚至不能正确地描述它。

所以，我想我不是第一个问这个。 但是我真的无法找到解决这个。 也许有这样的一些新的CSS3的方式 - 我想柔性盒。 任何的想法？ 也许这是比我希望它是更容易？

Answer 1:

如果我理解正确，你想要什么，你可以离开width和height属性关闭，以保持纵横比和使用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:

这是一个有点晚了，但我只是有同样的问题，最后用另一计算器后的帮助（解决它https://stackoverflow.com/a/29103071 ）。

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

希望这会帮助还是别人。

PS：还与最大高度 ， 最大宽度 ， 最小宽度和最小高度的CSS属性一起工作。 它使用类似100％或100vh / 100vw lenght单位填充容器或整个浏览器窗口espacially得心应手。

Answer 3:

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

正确的基于CSS的答案是使用object-fit: cover ，其工作方式background-size: cover 。 定位将由照顾object-position属性，默认为定心。

但在任何IE /边缘的浏览器为它不支持或Android <4.4.4。 而且， object-position不被Safari浏览器，iOS或OSX支撑。 Polyfills确实存在， 对象配合图像似乎给了最好的支持。

关于财产如何工作的更多详情，请参阅关于CSS技巧文章object-fit用于解释和演示。

Answer 4:

这应该这样做：

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

Answer 5:

考虑使用background-size: cover （IE9 +）会同background-image 。 对于IE8-，还有填充工具 。

Answer 6:

试试这个：

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

希望这可以帮助

Answer 7:

可以使用div来实现这一目标。 没有img标签:)希望这有助于。

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

 <div class="img"> </div> <div class="img1"> </div> 

Answer 8:

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

要达到的效果，但保持图像响应我使用下列内容：

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 9:

您可以使用CSS弯曲特性实现这一目标。 请参阅下面的代码

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

Answer 10:

在这里，你有我的工作的例子。 我已经使用一招，其设置图像作为背景尺寸在div容器的背景：盖和背景位置：中心中心

我已经放置在图像宽度为：100％和不透明度：0使其不可见。 请注意，我显示我的形象只是因为我有叫孩子click事件的特殊利益。

请注意，altought我尤斯的角度是完全不相干的。

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

其结果是，你在任何情况下定义为最佳之一

Answer 11:

我实现了“最好的情况”中描述的唯一办法，是把图像作为背景：

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

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

Answer 12:

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

Answer 13:

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

Answer 14:

不，还没有一个唯一的CSS3，解决这个。 该顶端回答你链接的问题是第二个最好的事情，虽然。

文章来源: How can I fill a div with an image while keeping it proportional?