修复图像大小而不重新调整大小答案

【问题标题】：fix image size without re-sizing修复图像大小而不重新调整大小
【发布时间】：2012-04-29 03:05:30
【问题描述】：

我有一个div，即width:500px; 和height:170px;

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

问题是图片是用户上传的，可以是任意aspect-ratio/任意尺寸。

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

style='height:x; width:x;

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

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

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

【问题讨论】：

【解决方案1】：

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

style="height:271px; max-height: 336px; max-width:336px; width: 263px;"

【讨论】：

【解决方案2】：

您应该能够使用 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%;
}

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

希望这对某人有所帮助:)

【讨论】：