8

我有一个div这是width:500px;和height:170px;

div包含一个jquery幻灯片，它从我的数据库中获取随机图像并显示它们。

问题是图像是由用户上传的，可以是任何宽高比/任何尺寸。

我需要图像适合div而不使用调整大小

style='height:x; width:x;

基本上，我希望所有图像都能以真实的质量正确显示。

我不想限制可以上传哪些尺寸的图像，因为它们以全尺寸/质量显示在网站的其他部分。

任何人都可以提供解决方案吗？

4

4 回答 4

8

您可以使用 CSS 设置幻灯片中图像的大小，而不必更改图像的纵横比。

  • 将图像的高度设置为幻灯片容器的高度

  • 使宽度自动，以保持其纵横比

  • 设置最大宽度，使其不会比幻灯片更宽

幻灯片.img{
    高度：170 像素
    width:auto;/*保持纵横比*/
    最大宽度：500px；
}

请注意，如果原始尺寸很小，图像可能会比幻灯片更薄。

于 2012-04-17T18:44:41.210 回答
5

您应该能够使用 CSS 的max-width属性。如果您这样做，您将不想指定宽度或高度。

您的 HTML：

<div id="yourContainer">
    <img src="imagePath" />
</div>

还有你的 CSS：

#yourContainer {
    width: 500px;
    height: 170px;
}

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

这不会使您的图像在容器内居中，但它应该可以为您完成工作。

于 2012-04-17T18:47:34.290 回答
3

我已经想出了如何使用简单的 CSS 代码来完成图像调整大小保持纵横比和居中图像，如下所示：

width: auto !important; /*Keep the aspect ratio of the image*/
height: 140px !important;
margin: 0 auto 1em auto; /*Center the image*/

希望这对某人有帮助:)

于 2017-07-29T00:35:35.737 回答
0

使用下面的高度和宽度组合

style="height:271px; max-height: 336px; max-width:336px; width: 263px;"
于 2020-07-19T10:25:27.947 回答