圖像條不會通過CSS屬性縮放

我有一個很大的圖像條。 130560 x 1080我想把它加載到一個圖像標記中，並有父div用作視圖端口一次只能看到圖像的一部分。圖像條不會通過CSS屬性縮放

我遇到的問題是，如果我做而不是指定圖像的高度和寬度，然後圖像顯示。但是，如果我確實指定了高度和寬度，例如width = 54442 height = 432，則圖像將消失。目的是將其擴展到40％。我曾嘗試通過CSS，屬性和Chrome調試器中的交互方式來改變它，但在任何情況下，任何高度值都會使圖像消失。

<html> 
    <head> 
     <style> 
      #imgContainer 
      { 
       width: 768px; 
       height: 432px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="imgContainer"> 
      <img src="complete.png" id='montage' height="432px"/> 
     </div> 
    </body> 
</html>

我用較小的JPG文件這種技術，但還沒有嘗試過一個PNG也不是對這個大小的文件。

對於任何想在這裏嘗試了這一點是文件 https://drive.google.com/file/d/0B_sWWl4f5UpESGEtRUdYbklQX0U/view?usp=sharing 警告大小爲12MB。

來源

2015-10-16 P Hemans

你是否像這樣：http://jsfiddle.net/c2vtt0n3/ – caramba

a img元素是一個內聯元素，將其CSS樣式設置爲display: block;或display: inline-block;以使其得到縮放。

您還可以使用width="54442"（無px）百分比設置寬度。

Offtopic：

你混合使用不同的引號，我只建議在HTML中使用「，以保持它的清潔
大的圖像需要大量的裝載，也許你應該大幅度地縮小它的大小，當然這不是真的很重要，如果這只是一個私人項目。

來源

2015-10-16 11:26:53 AlexG

對不起，但它沒有工作。 –

圖像條不會通過CSS屬性縮放

回答

相關問題