如何在固定大小的 div 中正确显示大图像？答案

【问题标题】：How to display large image properly in fixed size div?如何在固定大小的 div 中正确显示大图像？
【发布时间】：2015-09-06 18:57:35
【问题描述】：

我有很多不同尺寸的大图像（300x400、500x300...）。我想在固定大小的 div 中显示那些正确缩放的大图像。

例如，我有一个 200x200 的 div 和一个 500*300 的图像。

|--------------------|
|                    |
|                    |
|   div(200x200)     |
|                    |
|                    |
|--------------------|

|--------------------------------|
|                                |
|                                |
|   image(500x300)               |
|                                |
|                                |
|                                |
|                                |
|--------------------------------|

因此图像的宽度将为 200 像素，高度将按比例缩放并变为 300 * 200 / 500 = 125 像素。图像看起来会更小，但它会保持其比例并且看起来仍然不错。

|--------------------|
|      Blank         |
|--------------------|
|                    |
|   Image(200x125)   |     # div (200x200)
|                    |
|--------------------|
|      Blank         |
|--------------------|

我该怎么做？是否有任何 javascript 库可以做到这一点？

【问题讨论】：

试试img { max-width: 100%; vertical-align: middle; }

标签： javascript jquery html css

【解决方案1】：

您需要将max-width 和max-height css 属性用于img 标签。

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

这将使您的图像相对于其父容器保持纵横比。

当我们不知道图片的宽高时，我建议使用下面的css代码，它会自动对齐父容器中的图片。

.image-wrapper {
    display: table-cell;
    width: 100px;
    height:150px;
    vertical-align: middle;
    border: 1px solid black;
}

.image-wrapper img{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

Working Fiddle

使用background css 属性做同样的事情：

Working Fiddle

【讨论】：

【解决方案2】：

.divclass img {
  max-width: 100%;
}

【讨论】：

【解决方案3】：

HTML：

<div class="outerDiv">
    <img src="imagename.jpg" class="img">
</div>

CSS：

.img{
max-width:100%
}

希望对你有帮助

【讨论】：

你还需要 max-height:100% 以防图像是高而不是宽。

【解决方案4】：

在您的固定 div 上使用：

div {
    display: flex;
    justify-content: center;
    align-items: center;
    width:200px;
    height: 200px;
}

在您的img 上使用：

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

【讨论】：