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

我有很多不同大小的大图像（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

和

max height

css属性

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

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

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

当我们不知道图像的宽度和高度时，我建议使用下面的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;
}

使用

background

css属性执行相同操作：

HTML:

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

希望这有帮助

.divclass img{
最大宽度：100%；
}

尝试

img{max width:100%；vertical align:middle；}

如果图像是高的而不是宽的，则还需要最大高度：100%。