logo标签列表

将图像缩放以适应边界框

htmlcssimageresizeautoresize
132

是否有一种纯CSS的方法可以将图像缩放到边界框中（保持长宽比）？如果图像大于容器，则可以使用此方法：

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

示例：

但我想将图像缩放到某个维度以达到容器的100%。

你的意思是像这样 height: 100%, width: 100% 吗？你有想要达到的特定尺寸吗？否则，你也可以拉伸图片并强制它达到那些尺寸。 - mikevoermans
@mikevoermans 看看我的前两个例子：我想将图像拉伸到其中一个维度为100％，另一个维度<=100％。 - Thomas Guillory
@jacktheripper 当然要保持宽高比... - Thomas Guillory
@gryzzly 这些示例已经说明了一切！如果他们看了这些示例，那就显而易见了。 - Thomas Guillory
@Artimuz 我完全不同意。你的问题有三个答案（包括我的）都表明这并不明显。 - Khan
15个回答
0

我使用表格将图像居中放置在盒子内。它保持纵横比，并以完全符合盒子的方式缩放图像。如果图像小于盒子，则会在中心显示。以下代码使用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 x20px，那么图像就会超出较小的相应图像维度所对应的容器尺寸。容器由灰色1像素边框标记。
0

这对我的需求很有效，它在设置高度限制时不会压缩图像，而是会溢出。

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

0
使用Object Fit在div和img上来缩放图片
<div class="box"><img src="image.jpg"></div>

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

img { height: 100%; object-fit: cover; }
你能否编辑你的回答，解释一下为什么你的帖子与其他帖子不同/更好？ - Elikill58
0
.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

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

<div class='img-class' style='transform: scale(X);'></div>
-3
.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>
只有当盒子的高度大于宽度时，这个答案才有效。 - XwipeoutX
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接