缩放图像以适合边界框

是否有一个CSS的唯一解决scheme将图像缩放到边框(保持纵横比)? 如果图像比容器大,这将起作用:

img { max-width: 100%; max-height: 100%; } 

例:

  • 用例1(作品): http : //jsfiddle.net/Jp5AQ/2/
  • 用例2(作品): http : //jsfiddle.net/Jp5AQ/3/

但是我想放大图像,直到尺寸达到容器的100%。

  • 用例3(不起作用): http : //jsfiddle.net/Jp5AQ/4/

注意:尽pipe这是被接受的答案, 但下面的答案更准确,并且如果您可以select使用背景图像,则当前在所有浏览器中都支持该答案 。

不,没有CSS只有这样才能做到这一点。 你可以添加

 .fillwidth { min-width: 100%; height: auto; } 

对一个元素总是有100%的宽度,并自动将高度缩放到纵横比, 或者反过来:

 .fillheight { min-height: 100%; width: auto; } 

总是缩放到最大高度和相对宽度。 要做到这一点,你需要确定宽高比是高于还是低于容器,CSS不能这样做。

原因是CSS不知道页面是什么样的。 它事先设置规则,但是之后才会呈现元素,并且您确切知道正在处理的大小和比例。 检测的唯一方法是使用JavaScript。


虽然你不是在寻找一个JS解决scheme,但是如果有人可能需要,我会添加一个。 用JavaScript处理这个最简单的方法是根据比例差异添加一个类。 如果框的宽高比大于图像的宽高比,请添加类“fillwidth”,否则添加类“fillheight”。

 $('div').each(function() { var fillClass = ($(this).height() > $(this).width()) ? 'fillheight' : 'fillwidth'; $(this).find('img').addClass(fillClass); }); 
 .fillwidth { width: 100%; height: auto; } .fillheight { height: 100%; width: auto; } div { border: 1px solid black; overflow: hidden; } .tower { width: 100px; height: 200px; } .trailer { width: 200px; height: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tower"> <img src="http://placekitten.com/150/150" /> </div> <div class="trailer"> <img src="http://placekitten.com/150/150" /> </div> 

感谢CSS3有一个解决scheme!

解决的办法是把图像作为background-image ,然后设置background-size contain

HTML

 <div class='bounding-box'> </div> 

CSS

 .bounding-box { background-image: url(...); background-repeat: no-repeat; background-size: contain; } 

在这里testing: http : //www.w3schools.com/cssref/playit.asp?filename= playcss_background-size& preval=contain

与最新的浏览器完全兼容: http : //caniuse.com/background-img-opts

为了alignment中心的div,你可以使用这个变化:

 .bounding-box { background-image: url(...); background-size: contain; position: absolute; background-position: center; background-repeat: no-repeat; height: 100%; width: 100%; } 

这是我发现的一个黑客解决scheme:

 #image { max-width: 10%; max-height: 10%; transform: scale(10); } 

这会将图像放大十倍,但将其限制在最终尺寸的10%,从而将其限制在容器内。

background-image解决scheme不同,这也适用于<video>元素。

今天,只要说对象适合:包含。 支持是除IE之外的所有内容: http : //caniuse.com/#feat=object-fit

您是否想要向上扩展,但不是向下扩展?

 div { border: solid 1px green; width: 60px; height: 70px; } div img { width: 100%; height: 100%; min-height: 500px; min-width: 500px; outline: solid 1px red; } 

但是,这不locking纵横比。

另一种解决scheme没有背景图像,也不需要容器(尽pipe必须知道边界框的最大尺寸):

 img{ max-height: 100px; max-width: 100px; width: auto; /* These two are added only for clarity, */ height: auto; /* as the default is auto anyway */ } 

如果需要使用容器,则最大宽度和最大高度可以设置为100%:

 img { max-height: 100%; max-width: 100%; width: auto; /* These two are added only for clarity, */ height: auto; /* as the default is auto anyway */ } div.container { width: 100px; height: 100px; } 

为此,你会有这样的东西:

 <table> <tr> <td>Lorem</td> <td>Ipsum<br />dolor</td> <td> <div class="container"><img src="image5.png" /></div> </td> </tr> </table> 

你可以用纯CSS来完成这个工作,对于同一个驯服的垂直长和水平长的图像。

这里有一个在Chrome,Firefox和Safari中使用的代码片段(都使用了object-fit: scale-down ,而不使用它):

 figure { margin: 0; } .container { display: table-cell; vertical-align: middle; width: 80px; height: 80px; border: 1px solid #aaa; } .container_image { display: block; max-width: 100%; max-height: 100%; margin-left: auto; margin-right: auto; } .container2_image2 { width: 80px; height: 80px; object-fit: scale-down; border: 1px solid #aaa; } 
 Without `object-fit: scale-down`: <br> <br> <figure class="container"> <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg"> </figure> <br> <figure class="container"> <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg"> </figure> <br> Using `object-fit: scale-down`: <br> <br> <figure> <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg"> </figure> <br> <figure> <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg"> </figure> 

我用桌子将图像放在框内。 它保持高宽比和缩放图像的方式完全在盒子里面。 如果图像比盒子小,则显示为中心。 下面的代码使用40px宽度和40px高度框。 (不太清楚它的工作原理,因为我从另一个更复杂的代码中删除了它,并且稍微简化了一下)

CSS:

 .SmallThumbnailContainer { display: inline-block; position: relative; float: left; width: 40px; height: 40px; border: 1px solid #ccc; margin: 0px; padding: 0px; } .SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } .SmallThumbnailContainer tr { height: 40px; text-align: center; } .SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px; } .SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; } 

HTML:

 <table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0"> <tr><td> <img src="thumbnail.jpg" alt="alternative text"/> </td></tr> </table> 

这个例子按比例拉伸图像以适应整个窗口。 上面正确的代码即兴添加$( window ).resize(function(){});

 function stretchImg(){ $('div').each(function() { ($(this).height() > $(this).find('img').height()) ? $(this).find('img').removeClass('fillwidth').addClass('fillheight') : ''; ($(this).width() > $(this).find('img').width()) ? $(this).find('img').removeClass('fillheight').addClass('fillwidth') : ''; }); } stretchImg(); $( window ).resize(function() { strechImg(); }); 

有两个条件。 第一个检查图像高度是否小于div,并应用.fillheight类,而下一个检查宽度和应用.fillwidth类。 在这两种情况下,其他类都使用.removeClass()

这是CSS

 .fillwidth { width: 100%; max-width: none; height: auto; } .fillheight { height: 100vh; max-width: none; width: auto; } 

如果你想用div来拉伸图像,你可以用100%replace100vh 。 这个例子按比例拉伸图像以适应整个窗口。

最干净和最简单的方法来做到这一点:

首先一些CSS:

 div.image-wrapper { height: 230px; /* Suggestive number; pick your own height as desired */ position: relative; overflow: hidden; /* This will do the magic */ width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */ } img { width: 100%; position: absolute; left: 0; top: 0; height: auto; } 

HTML:

 <div class="image-wrapper"> <img src="yourSource.jpg"> </div> 

这应该做的伎俩!

这帮助了我:

 .img-class { width: <img width>; height: <img height>; content: url('/path/to/img.png'); } 

然后在元素上(您可以使用JavaScript或媒体查询来添加响应):

 <div class='img-class' style='transform: scale(X);'></div> 

希望这可以帮助!

 .boundingbox { width: 400px; height: 500px; border: 2px solid #F63; } img{ width:400px; max-height: 500px; height:auto; } 

我正在编辑我的答案,以进一步解释我的解决scheme,因为我有一个投票。

在css中设置如上所示的样式,现在下面的html div将显示总是适合宽度的图像,并且将高宽比调整为宽度。 因此,图像将按照问题中的要求进行缩放以适应边界框

 <div class="boundingbox"><img src="image.jpg"/></div>