通过使用宽度和高度属性缩放图像以适合指定的矩形答案

【问题标题】：Scaling image by using width and height properties to fit in specified rectangle通过使用宽度和高度属性缩放图像以适合指定的矩形
【发布时间】：2014-05-22 17:16:05
【问题描述】：

假设我有一个指定宽度和高度的矩形区域（例如由div 定义）。而且我有一个尺寸和纵横比不可预测的图像。

如果我希望该图像适合给定的矩形区域并保持原始纵横比，我该怎么做？

如果我事先知道哪一方会受到限制，我可以只指定一个维度。例如，如果矩形的大小为 200x100 像素，图像的大小为 400x300 像素，我可以使用 <img src="link/to/my/image.jpg" height="100px"> 代码，并且图像将保持其纵横比并进入我的矩形。但是，如果矩形将是例如 100x100 像素，则图像将超出矩形的边。

所以我唯一能做的就是排除图像大小并进行一些简单的计算来定义图像的宽度和高度：保持原始配给并适合所有可能组合的指定矩形。

但是看起来有点复杂，需要在服务器端使用图形库。可能是我错过了一些 HTML 功能吗？

【问题讨论】：

你在找this

标签： html image image-scaling

【解决方案1】：

您可以通过输入此 CSS 代码来做到这一点。

min-width: 100%;
height: auto;

或相反

min-height: 100%; width: auto;

示例

HTML

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

CSS

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

或者 -------------------

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

fiddle

【讨论】：

我尝试了第一个。在我的情况下工作min-width: 100%; **max-width: 100%;** height: auto; 所以我希望在某些情况下（例如图像小于矩形）我会得到错误的结果......
嗯，这一切你都可以做，这是正确的答案，如果顺便说一下，如果你想要一些间隙，比如使图像小于你可以根据需要使用填充 XX px，它会给出一些间隙从你的盒子的所有边框，它会让你的图像适合。

【解决方案2】：

简单，

<div id="rectangle" style="width:auto; height:auto;">
    <img src="link/to/my/image.jpg" width="100px" height="100px">
</div>

或者

<style>
#rectangle {width:auto; height:auto;}
</style>

<div id="rectangle">
    <img src="link/to/my/image.jpg" width="100px" height="100px">
</div>

【讨论】：

据我所知，如果 image.jpg 的大小为 200 x 100 像素，它将垂直拉伸显示。正确的？我想保持原来的纵横比。
试过了。我得到了我所期望的：小方块（比原来的盒子小），纵横比错误。
你能发张照片吗
好的，我看到的第一个错误是在 'Alt' 之后应该是 'alt="Title"'
老实说，我不知道你怎么能这样做......我很难过

【解决方案3】：

除非我误解了您要做什么，如果矩形是固定宽度和高度，只需将其中的图像元素的最大宽度和最大高度设为 100%。

类似这样的：http://jsfiddle.net/PKG4d/

CSS：

.container {
    width: 600px;
    height: 600px;
    overflow: hidden;
    border: 1px blue dotted;
}
.container > img {
    max-height: 100%;
    max-width: 100%;
}

HTML：

<div class="container"><img src="http://img-fotki.yandex.ru/get/9088/855366.8a/0_a3175_3d12a514_orig.png"></div>

【讨论】：

如果图像比容器小，我会把它变小吗？
不，如果图像比容器小，它将以正常尺寸显示，而不是缩放。只有当它大于容器的高度或宽度时才会缩放。