缩放图像以适合边界框

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&prevval/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

注意:尽管这是接受的答案,但下面的答案更准确,如果您可以选择使用背景图像,目前所有浏览器都支持此答案.

不,没有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

这是我发现的一个hackish解决方案:

#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

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