缩放图像以适合边界框
是否有一个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>
