Question

是否有仅使用CSS的解决方案将图像缩放到边界框（保持纵横比）？如果图像大于容器，则此方法有效：

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/

Answer 1

感谢CSS3有一个解决方案！

解决方法是将图片设为background-image，然后将background-size设置为contain。

<强> HTML

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

<强> CSS

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

在此测试：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

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

要将div对齐在中心，您可以使用以下变体：

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

Answer 2

注意：即使这是接受的答案，the answer below也更准确，如果您可以选择使用背景图片，目前在所有浏览器中均受支持。

不，没有CSS只能在两个方向上执行此操作。你可以添加

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

要使元素始终具有100％宽度并自动将高度缩放为纵横比，或反之：

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

始终缩放到最大高度和相对宽度。要做到这两点，你需要确定宽高比是高于还是低于它的容器，CSS不能这样做。

原因是CSS不知道页面是什么样的。它预先设置规则，但只有在那之后，元素才会被渲染，并且您确切地知道您正在处理的大小和比率。检测它的唯一方法是使用JavaScript。

虽然您不是在寻找JS解决方案，但如果有人可能需要，我会添加一个。使用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>

Answer 3

这是我发现的一种黑客解决方案：

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

这会将图像放大十倍，但将其限制在最终尺寸的10％ - 从而将其限制在容器中。

与background-image解决方案不同，这也适用于<video>元素。

Answer 4

今天，只说对象适合：包含。支持就是IE：http://caniuse.com/#feat=object-fit

Answer 5

HTML：

    <div class="container">
      <img class="flowerImg" src="flower.jpg">
    </div>

css：

.container{
  width: 100px;
  height: 100px;
}


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}

Answer 6

您是希望向上扩展而不是向下扩展吗？

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

然而，这并不会锁定宽高比。

Answer 7

此示例按比例拉伸图像以适合整个窗口。对上述正确代码的即兴创作是添加$( 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中展开图片，可以将100vh替换为100%。此示例按比例拉伸图像以适合整个窗口。

Answer 8

另一种没有背景图像且无需容器的解决方案（尽管必须知道边界框的最大尺寸）：

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

<小时/> 如果需要使用容器，则max-width和max-height可以设置为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>

Answer 9

您可以使用纯CSS实现此目的，无论是对于相同温度的垂直长和长水平图像。

这是一个可在Chrome，Firefox和Safari中使用的代码段（均使用object-fit: scale-down，而不使用它）：

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 10

我使用表格将图像置于框内。它保持纵横比并以完全在盒子内部的方式缩放图像。如果图像小于框，则显示图像位于中心。下面的代码使用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>

Answer 11

最干净，最简单的方法：

首先是一些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>

这应该可以解决问题！

Answer 12

这对我有所帮助：

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

然后在元素上（您可以使用javascript或媒体查询来添加响应性）：

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

希望这有帮助！

Answer 13

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

我正在编辑我的答案，以便在我投票时进一步解释我的解决方案。

如上所示在css中设置样式，现在下面的html div将显示图像始终适合宽度，并将高宽高比调整为宽度。因此，图像将缩放以适合问题中提出的边界框。

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

缩放图像以适合边界框

13 个答案: