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

我在css很糟糕。我有一个可以放置多个图像的div。这个div是一张幻灯片。如何根据图像缩放图像 - css

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

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

并滑动，第三幻灯片图像亘古不完整形式显示出来..

2014-01-20 doniyor

什么是'img {width：100％; height：auto}'错？ – NoobEditor

幻灯片中的图像不是100x300或300x100，它们是1920x2560或2560x1920，每个大小约1MB。如果您希望图像为100x300或300x100，您应该在传输图像前调整大小，以便在较慢的连接上加载速度更快。 –

@NoobEditor，这应该做的伎俩，但幻灯片高度不规模，我该怎么做？ – doniyor

一个很大的问题，你在这里是你的图片不是 100x300px或300x100px，它们是1920x2560px或2560x1920px - 远远大得多。它们的大小也都在1MB左右，实际上对于像这样的图像而言太大了。在做任何事之前，您应该自己调整这些图像的大小，使其成为所需的大小，并最终减小文件大小。

在此之后，只需从#slides img选择删除max-widthmax-height和属性，然后修改width和height到：

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

的initial值设置图像尺寸到其初始尺寸;这意味着如果您的图像是100x300，那也是它的初始大小。将此与您目前使用的图像一起使用时，将它们设置为1920x2560或2560x1920。

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

2014-01-20 09:31:08

谢谢你，我会给你一个镜头 – doniyor

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

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

2014-01-20 09:27:28 user3064914

查看上面的注释，NoobEditor明确地问'img {width：100％; height：auto}是什么错误？ –

回答