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/

滑动时，第三张幻灯片图像不会以完整形式显示..

Answer 1

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

之后，只需从max-width选择器中删除max-height和#slides img属性，然后将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>

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

2 个答案: