在混合動態和靜態圖像時遇到問題

我正在嘗試在具有一組圖像的框架內創建一個畫廊。圖庫中的第一個圖像我試圖讓它具有窗口高度的動態圖像，以及不改變圖像縱橫比的相應寬度。我發現我能做到這一點，此代碼：在混合動態和靜態圖像時遇到問題

<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1"> 
<img src="IMAGENAME.jpg" height="100%"/></div>

接下來，我想圖像添加到其中有一個固定的大小動態地這個尺寸圖像的右側，然後我想另一個圖像添加到右邊是固定的大小等。

由於窗口顯示在不同的屏幕上，我希望靜態圖像總是觸摸動態圖像的邊界。

我試過這樣做的各種方法，但我幾乎卡住了，任何人都可以幫忙嗎？最簡單的方法是獲取窗口高度，然後將其乘以固定的數量（高寬比），然後將其他圖像與該數量相抵消，但我無法弄清楚如何實現這一點。

我很感激任何幫助。

來源

2012-04-18 Chris M

你可以使用下面的代碼，以浮動所有的圖像動態一個挨着：

<html> 
<head> 
<style type="text/css"> 
.thumbnail 
{ 
    float:left; 
} 
</style> 
</head> 

<body> 
<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1"> 
    <img class="thumbnail" src="IMAGENAME.jpg" height="100%"> 
    <img class="thumbnail" src="img1.jpg"> 
    <img class="thumbnail" src="img2.jpg"> 
    <img class="thumbnail" src="img3.jpg"> 
    <img class="thumbnail" src="img4.jpg"> 
</div> 
</body> 
</html>

來源

2012-04-18 06:38:35 dimmat

與一個小的調整工作。我不得不將div標籤中的「寬度」更改爲一個值，即7000px 我唯一的問題是我想垂直居中放置圖像。任何幫助？ – 2012-04-18 19:48:09

在混合動態和靜態圖像時遇到問題

回答

相關問題