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

我发现这个线程 - How do you stretch an image to fill a <div> while keeping the image's aspect-ratio? - 这不完全是我想要的东西。如何在保持比例的同时用图像填充div？

我有一个特定大小的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。任何想法？也许它比我预期的更容易？

来源

2013-01-03 matt

你为什么要使用CSS3的时候，你仍然可以用JavaScript做它容易吗？去与js matey .. – GautamJeyaraman

未经测试，但你可以尝试设置最小高度和最小宽度为100％？这应该至少填满盒子，并保持它的比例 – chrisbulmer

-1

不，没有CSS3专用的解决方案。尽管如此，您链接的问题上的top answer是第二好的。

来源

2013-01-03 16:01:02 Lynn

但是，我怎样才能真正实现我上面画的东西。你所指的“最佳答案”并不完全是我想要的。你介意给我一个更准确的答案吗？ – matt

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

来源

2013-01-03 16:07:56

这不需要background-url吗？你能详细解释一下吗？如问题中所述，这可以与一起使用吗？ – harsimranb

@harsimranb当然，'background-size'只能用指定的'background-image'（我已经更新了我的答案）。它不适用于'IMG'元素。 –

这是最好的答案。它很简单，并且具有良好的浏览器支持。所有其他解决方案要么非常复杂，要么不在IE（9）中工作。 – JoostS

如果我正确理解您的要求，您可以将宽度和高度属性从图像上去除以保持纵横比，并使用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测试成功这个但是，没有其他的浏览器进行了测试。一如既往，您必须考虑您的特定支持要求。

来源

2013-12-03 02:06:40 Isius

在IE9中，图像不是通过此方法垂直或水平居中，而是与顶部和左侧对齐。 http://i59.tinypic.com/ouo77s.png –

这在iPad上有问题，它显示safari将图像拉伸到其高度的100％，但不保留min-width属性。 – Sean

很多简化的jsfiddle：http://jsfiddle.net/Rx37G/53/ –

在这里你有我的工作示例。我已经使用了一种技巧，将图像设置为具有背景大小的div容器的背景：cover and background-position：center center

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

请注意，altought我是ussing角是完全不相关的。

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

的结果是，你在任何情况下

来源

2016-05-26 12:47:42

一个老问题定义为最佳，但因为现在有一种方法值得更新的一个。

正确的基于CSS的答案是使用object-fit: cover，其工作原理与background-size: cover一样。定位将由object-position属性负责，该属性默认为居中。

但是在任何IE/Edge浏览器或Android中都不支持4.4.4。此外，Safari，iOS或OSX不支持object-position。 Polyfills确实存在，object-fit-images似乎给予了最好的支持。

有关该物业如何运作的更多详情，请参见CSS Tricks article on object-fit以获得解释和演示。

来源

2016-06-02 09:59:10 holist

这应做到：

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

来源

2016-08-05 08:54:02 maksim1

对我来说工作得很好，在我的情况下，我只需要添加position：absolute和top：0以及一些z-index – byroncorrales

试试这个：

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

希望这有助于

来源

2016-08-07 02:28:54 Landerqvist

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

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

希望这仍然有助于某人。

PS：另外随着最大高度，最大宽度，最小宽度和最小高度 CSS属性一起工作。使用长度单位如100％或100vh/100vw特别方便地填充容器或整个浏览器窗口。

来源

2016-08-25 16:08:01 Hermilton

这是一个交叉浏览器解决方案吗？ – candlejack

物件适合度：封面;很棒！浏览器信息（不适用于IE）： https://css-tricks.com/almanac/properties/o/object-fit/ IE的备用解决方案： https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3 MS正在努力实现它：https://developer.microsoft.com/en-us/microsoft-edge /平台/状态/ objectfitandobjectposition / – Kaah

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

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

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

来源

2017-11-29 09:11:07

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

回答

相关问题