image - 修复图像大小而不调整大小

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

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