缩放图像以适应边框

你是想往上爬而不是往下爬吗？

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

然而，这并不锁定纵横比。

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

编辑2: 在现代，使用 object-fit可能是一个更好的解决方案: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

不，没有 CSS 的唯一方法可以在两个方向上做到这一点。您可以添加

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

对于一个总是拥有100% 宽度并且自动调整高度到高宽比的元素，或者与之相反:

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

总是缩放到最大高度和相对宽度。要做到这两点，您将需要确定纵横比是否高于或低于它的容器，而 CSS 不能这样做。

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

虽然您不是在寻找一个 JS 解决方案，但如果有人可能需要它，我还是会添加一个。使用 JavaScript 处理这个问题的最简单方法是根据比例的差异添加一个类。如果框的宽高比大于图像的宽高比，则添加类“ fill width”，否则添加类“ fill height”。

$('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有一个解决方案！

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

超文本标示语言

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

我已经使用表格中心的形象内的方块。它保持高宽比和缩放图像的方式是完全在框内。如果图像比盒子小，那么它显示为它在中心。下面的代码使用40px 的宽度和40px 的高度框。(不太确定它的工作效果如何，因为我从另一个更复杂的代码中删除了它，并对它进行了简化)

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

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="https://www.gravatar.com/avatar/bf7d39f4ed9c289feca7de38a0093250?s=32&d=identicon&r=PG" width="32" height="32" alt="OP's SO avatar image used as a sample jpg because it is hosted on SO, thus always available" />
</td>
</tr>
</table>

注意: 此代码片段的本机缩略图大小为32px x 32px，小于其40px x 40px 容器。如果容器的尺寸在任何维度上都小于缩略图，比如40px x 20px，那么图像就会以小于相应图像维度的尺寸流出容器。该容器由一个灰色的1px 边框标记。

下面是我发现的一个骇客解决方案:

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

这将使图像放大十倍，但限制其最终尺寸的10%-从而限制它的容器。

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

互动例子:

 function step(timestamp) {
var container = document.getElementById('container');
timestamp /= 1000;
container.style.left   = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
container.style.top    = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
container.style.width  = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
window.requestAnimationFrame(step);
}


window.requestAnimationFrame(step);

 #container {
outline: 1px solid black;
position: relative;
background-color: red;
}
#image {
display: block;
max-width: 10%;
max-height: 10%;
transform-origin: 0 0;
transform: scale(10);
}

<div id="container">
<img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>

此示例按比例拉伸图像以适应整个窗口。 对上述正确代码的一个改进是添加 $( 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%。此示例按比例拉伸图像以适应整个窗口。

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

今天，只需要说 object-fit: include

首先是 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{
max-height: 100px;
max-width: 100px;
width: auto;    /* These two are added only for clarity, */
height: auto;   /* as the default is auto anyway */
}

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>

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

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

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

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

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

在 div 和 img 上使用 Object Fit 来缩放图像

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


.box {height: auto;
object-fit: cover;}


img { height: 100%; object-fit: cover; }

这个工作为我的需要，不平坦的图像，同时设置高度限制，它溢出而不是。

.top-container{
width:50%;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
height: 40vh;
width: 100%;
overflow: hidden;
}
    

.img-container img {
max-width: 10%;
max-height: auto;
transform: scale(10);
}

<div class='top-container'>
<div class='img-container'>
<img src='image.jpg'>
</div>
</div>