如何根据图像缩放图像-CSS

Question

我对CSS很不好。 我有一个可以放置多个图像的div。 这个div是一张幻灯片。

<div id="slides">                  
   <img src="imagename.jpg"/>                                                                 
</div>

有些图像例如是100x300，有些则是300x100。 如何根据自己的尺寸缩放这些图像，使其以原始形式显示？

我带这个错误的实时示例在这里： http : //wohne-wo-du-willst.de/angebot/Wohnung/ist-frei-in-Dachau/22/

当您滑动时，第3张幻灯片图像不会完整显示。

Answer 1

您这里遇到的一个大问题是图片不是 100x300px或300x100px，而是1920x2560px或2560x1920px-大得多。 它们的大小也都在1MB左右，实际上对于这样的图像来说太大了。 在执行任何操作之前，您应该自己调整这些图像的大小，以使其达到所需的大小，并最终减小其文件大小。

之后，只需从#slides img选择器中删除max-width和max-height属性，然后将width和height修改为：

#slides img {
    ...
    height: initial;
    width: initial !important;
}

initial值将图像尺寸设置为其初始尺寸； 也就是说，如果您的图片尺寸为100x300，则它也是其初始尺寸。 将其与当前使用的图像一起将其设置为1920x2560或2560x1920。

不幸的是，我不得不在这里使用!important ，因为幻灯片插件会尝试将您的图片强制设为100％的宽度。

Answer 2

<style>
img
   {
      height:100%;
      width:100%;
    }
</style>

<div id="slides">                 
 <img src="imagename.jpg"/>                                                                 
</div>