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


120

我找到了这个线索- 如何在保持图像的长宽比的同时拉伸图像以填充<div>?-这不完全是我想要的东西。

我有一个具有一定大小的div,并且其中有一个图像。我想始终用图像填充div,而不管图像是横向还是纵向。图像是否被剪切也没关系(div本身已隐藏溢出)。

因此,如果图像是人像我想要的width100%height:auto,使其保持在比例。如果图像是风景我想要的height100%width to beauto`。听起来很复杂吧?

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

因为我不知道该怎么做,所以我只是简单地创建了我的意思的图像。我什至无法恰当地描述它。

在此处输入图片说明

所以,我想我不是第一个问这个问题的人。但是我真的找不到解决方案。也许有一些新的CSS3方式可以做到这一点-我正在考虑使用flex-box。任何想法?也许它比我预期的要容易得多?


为什么仍然可以使用javascript轻松地使用css3?和js
matey

1
未经测试,但您可以尝试将最小高度和最小宽度设置为100%?那至少应该填满整个盒子并保持比例
chrisbulmer

Answers:


150

如果我正确理解了您想要的内容,则可以不使用图像的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中成功进行了测试。但是,没有测试其他浏览器。与往常一样,您必须考虑自己的特殊支持要求。


在IE9中,使用此方法图像不会垂直或水平居中,而是将图像上下左右对齐。i59.tinypic.com/ouo77s.png
Mike Kormendy 2014年

1
这在iPad上存在问题,野生动物园似乎会将图像拉伸到其高度的100%,但不保留最小宽度属性。
肖恩

14
这似乎将小图像放大到可以填充,但不能缩小到合适的程度。至少当我使用大图像时,它只显示了一小部分。
Johncl

12
为了将大图像缩小到合适的大小,我在图像上使用了以下内容:.fill img { min-height:100%; min-width: 100%; object-fit: cover; }
Peter G

超级英雄!:D
Garis M Suero

47

有点晚了,但是我遇到了同样的问题,并在另一个stackoverflow帖子(https://stackoverflow.com/a/29103071)的帮助下终于解决了。

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

希望这仍然可以帮助到别人。

Ps:还可以与max-heightmax-widthmin-widthmin-height css属性一起使用。使用长度为100%100vh / 100vw的长度单位填充容器或整个浏览器窗口特别方便。


这是跨浏览器解决方案吗?
Candlejack

1
适合对象:封面;很棒!浏览器信息(在IE中不起作用):css-tricks.com/almanac/properties/o/object-fit IE的 后备解决方案:medium.com/@primozcigler/…MS正在努力实现它:developer.microsoft.com / en-us / microsoft-edge / platform / status /…
Kaah

我想object-position在该类中添加一条规则会有所帮助。只是一个旁注。
塔哈·帕克苏

8

一个古老的问题,但是值得更新,因为现在有一种方法。

基于CSS的正确答案是use object-fit: cover,其工作方式类似于background-size: cover。定位将通过object-position属性(默认为居中)进行处理。

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

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


8

应该这样做:

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

对我来说效果很好,就我而言,我只需要添加position:absolute和top:0,以及一些z索引
byroncorrales

7

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

为了获得结果但保持图像响应速度,我使用了以下方法:

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

我在整个设计投资组合公司的网站上使用了背景图片,因此可以使用背景尺寸:封面。现在,我的图片SEO都被搞砸了,因为Google无法识别背景图片。我希望我已经用另一种方式编码了。
亚历克斯·班曼

5

您可以使用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>


1
仅当删除其他一些答案中提到的width和height属性时,此方法才有效。
Chiwda

3

考虑将background-size: cover(IE9 +)与结合使用background-image。对于IE8-,还有填充工具


这不需要背景网址吗?您能详细说明吗?可以与问题中所述的<img src =“” />一起使用吗?
harsimranb,2015年

@harsimranb当然,background-size仅使用background-image指定也有意义(我已经相应更新了答案)。它不适用于IMG元素。
马拉·塔纳林

这是最好的答案。它很简单,并具有良好的浏览器支持。所有其他解决方案要么非常复杂,要么在IE(9)中不起作用。
JoostS

1

试试这个:

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

希望这可以帮助


1

您可以使用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>


1

我实现了描述的“最佳情况”方案的唯一方法是将图像作为背景:

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

1

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

使用简单的JS代码段检测是否 object-fit支持,然后将替换imgsvg

//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', () => {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), 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`
    })
  })
}
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可以做的polyfill object-fit

这里有一些例子:


0

这里有我的工作示例。我使用了一个技巧,将图像设置为具有background-size:cover和background-position:center center的div容器的背景

我将图像的宽度:100%和不透明度:0设置为不可见。请注意,我之所以显示图片,仅是因为我对调用子点击事件特别感兴趣。

请注意,如果我使用角度,则完全不相关。

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

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


0

CSS object-fit: coverobject-position: left center属性值现在可以解决此问题。


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>


-3

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

img{
    height: 95vh;
    width: auto;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.