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

Question

我有div width:500px;和height:170px;

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

问题是图片是由用户上传的，可以是宽高比 / 任意大小。

我需要图像适合div而不使用

调整大小

style='height:x; width:x;

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

我不想限制哪些尺寸的图片可以按照完整尺寸/质量在网站其他部分显示的方式上传。

可以提供解决方案吗？

Answer 1

您可以使用CSS设置幻灯片中图像的大小，而无需更改图像的宽高比。

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

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

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

slideshow.img{
    height:170px
    width:auto;/*maintain aspect ratio*/
    max-width:500px;
}

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

Answer 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%;
}

这不会将您的图像置于容器内部，但它应该为您完成工作。

Answer 3

我已经想出如何实现图像调整大小，保持宽高比，并使用简单的CSS代码将图像居中，如下所示：

boost

希望这有助于某人：）

Answer 4

使用以下高度和宽度组合

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