Question

我们说我有一个矩形区域（例如由div定义），具有一些指定的宽度和高度。而且我的图像具有不可预测的大小和宽高比。

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

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

所以我唯一能做的就是隐藏图像大小并做一些简单的计算来定义图像的宽度和高度：保持原始的比例并适合所有可能组合的指定矩形。 / p>

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

Answer 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

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

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

使用width和height属性缩放图像以适合指定的矩形

3 个答案: