如何僅使用css縮放圖像塊？

這是3個內聯塊。第一個是可擴展的，右邊的兩個塊有固定的寬度。如果我們調整瀏覽器的權限，無論如何應該是可見的。 #blockID應該適合頁面，同時如果我們調整了窗口大小，圖像應該是可擴展的。如何僅使用css縮放圖像塊？

我想在第一個塊的圖像可縮放。

我發現了幾種使用JS的方法，但由於離散性，JS不適合。有沒有一些技巧只使用CSS？

<div style="width: 100%; height: 300px; white-space: nowrap;" id="blockID"> 

     <div style="max-width: 640;"> 
      <div style="display: inline-block; height: 300px; max-width: 300px; width: 100%; background: #ffff00; position: relative; overflow: hidden;" id="pano"> 
       <img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%; min-width: 100%; max-width: 100%; position: absolute; "/> 
      </div> 

      <div style="display: inline-block; height: 300px; width: 640px; background: #000;"> 

      </div> 

      <div style="display: inline-block; height: 300px; width: 60px; background: #ff7870;"> 

      </div> 
     </div> 
    </div>

更新1： 我已經改變了草書文字

更新2： 我可以使用表CSS實現這種效果。但桌子不好。 http://jsfiddle.net/6ng62eb7/4/

來源

2015-05-04 AnthonyK

「*第一個是可擴展的，左邊的一個是固定*」，第一個**是左邊的......你可能是說右邊的兩個是固定的......？請澄清。 – LinkinTED

這裏「左」是一個動詞 - 「過去」。 – AnthonyK

你能解釋一下好嗎？你想要對圖像進行縮放比例？使足夠大的3行內嵌塊填充窗口寬度，無論它有多大，還是別的什麼？ –

嘗試組合顯示塊和內嵌塊，如下所示：

<div style="width: 100%; height: 300px; white-space: nowrap;"> 
    <div style="width: 100%; min-width: 641px; "> 
     <div style="display: table-cell; width: 30%; height: 286px; background: #ffff00; max-width: 350px; vertical-align: top;" id="pano"> 
      <img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" max-width: 90%; margin: 5%; " /> 
     </div> 

     <div style="display: table-cell; width: 70%; min-width: 641px;"> 

      <div style="display: inline-block; width: 641px; height: 286px; background: #000;" id="content"> 

      </div> 

      <div style="display: inline-block; width: 60px; height: 286px; background: #0044ff;" id="basket"> 

      </div> 
     </div> 
    </div> 
</div>

http://jsfiddle.net/rfh8dgqu/

我不知道跨瀏覽器兼容，但它在Chrome瀏覽器的

來源

2015-05-04 12:47:56 Anthony

它不會在IE7中工作。表格單元格不支持那裏。 – AnthonyK

嘗試給圖像只有100％的最大寬度。

因此改變：

<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%; min-width: 100%; max-width: 100%; position: absolute; "/>

到：

<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style="max-width: 100%;"/>

Updated Fiddle

來源

2015-05-04 08:36:57 LinkinTED

在這種情況下，它可以擴展後右塊已經超出瀏覽器。正確的塊應該是可見的 – AnthonyK

你需要給圖像max-width: 100%。這將縮放與容器相關的圖像。然後你需要縮放圖像所在的容器。現在你已經爲父div設置了<div style="max-width: 300px; width: 100%;" id="pano">，所以img裏面最多隻能達到300px。

您還可以將總容器設置爲<div style="max-width: 640px;">，這意味着所有3個元素在一起永遠不會大於640像素。

這就是爲什麼當你縮小瀏覽器窗口時，你只能看到你的圖像縮放。底線是，你必須使整個元素（包括它的容器響應或這不會工作） - 當定義盒子大小時，你必須使用％而不是px，em ...。這也意味着你想保持在右邊的其他兩個元素必須在％（並且全部3需要加起來高達100％）。

來源

2015-05-04 08:58:19

是的，你是對的 - 我所有3個元素在一起永遠不會超過640px。主要目的是隱藏圖像，如果我們有小窗口（小於900px），同時圖像應該大於300px，但可以是200px或100px的寬度。 – AnthonyK

爲此，您需要一些稱爲媒體查詢的內容。通常你會寫'@media screen和（min-width：900px）{body {background-color：＃000; }}'到你的css文件中（如果屏幕大於900px，則將主體背景改爲黑色）。 –

我更新了帖子。有我需要的一個例子效果。我可以使用表格單元格\t css，但它在ie7中不起作用。 – AnthonyK

如何僅使用css縮放圖像塊？

回答

相關問題