如何根據圖像縮放圖像 - 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}是什麼錯誤？ –

回答