用JqueryRotate旋轉圖像後調整表格TD

我有一個Filemaker攝影數據庫，我試圖爲35mm底片生成一個聯繫表。用JqueryRotate旋轉圖像後調整表格TD

我使用腳本來動態創建一個簡單的HTML表格，它在Web查看器中呈現。

我用JQueryRotate 90度，只有具有縱向取向以及對調整所有圖像，使它們的圖像旋轉較小：

<script> 
    $(document).ready(function(){ 
     $('img.portrait').rotate(90); 
     $('img.landscape').width(191); 
     $('img.portrait').height(191); 
    }); 
</script>

這是一個典型的錶行：

<tr> 
    <td>A</td> 
    <td><img class="landscape" src="CM04_F20_A1.jpg"></td> 
    <td><img class="landscape" src="CM04_F20_A2.jpg"></td> 
    <td><img class="portrait" src="CM04_F20_A3.jpg"></td> 
    <td><img class="landscape" src="CM04_F20_A4.jpg"></td> 
    <td><img class="portrait" src="CM04_F20_A5.jpg"></td> 
    <td><img class="landscape" src="CM04_F20_A6.jpg"></td> 
</tr>

這是我的CSS迄今：

<style type="text/css"> 
    table.noborder {border:none;} 
    td.noborder {border:none; text-align: left; padding:0px;} 
    body, h1, h2, h3 { 
     margin:0px; 
     padding:0px; 
    } 
    h2 {font-family:"Calibri",Arial,Helvetica,sans-serif; font-size:16pt; font-weight:bold;} 
    table {border-collapse:collapse; border:1px solid black;} 
    td { 
     border:1px solid black; 
     vertical-align:middle; 
     text-align:center; 
     } 
    th {border:1px solid black;} 
</style>

這是結果（因爲你可以看到，我很牛逼rying創建爲保持在一個給定的持有人的檔案專輯35mm的負條）參考聯繫表：

http://i1163.photobucket.com/albums/q545/callyphage/contactSheet.png

不管我做什麼，錶行的高度，那裏有一個已經通過Jquery旋轉的圖像似乎永久設置爲旋轉前圖像的高度。（這就是爲什麼這些單元格有一個正方形的外觀。）

我想擺脫儘可能多的圖片下面的空白空間，但一直未能。我試圖將表格行的高度設置爲固定的數字（例如130像素），但無濟於事。

我希望我已經說清楚了。所有這些我都很新。我有一種感覺，必須有更好的方法來完成這一切。

我將不勝感激任何建議。

來源

2012-08-22 user1615897

空白的原因是肖像圖像的高度，因爲在頁面加載後它佔據了它的高度，之後它只是轉換和旋轉。 – gaurang171

在我看來，你需要加載一個JavaScript或風格的HTML（在標籤之前）強制TD.height運行jquery調用後（在我的假設頭）。

IE：

<style>td {height:130px !important;}</style>

或：

<style>td {max-height:130px;}</style>

作出這樣的空白被填補產生在你的代碼確保您還設置的cellpadding零，以備不時之需。

最後的建議是將HTML文件保存到桌面並用chrome加載，右鍵單擊並在TD上選擇「檢查元素」以查看CSS是如何應用的。

來源

2012-08-23 16:45:50

感謝您的反饋，Keyur和Mike B. – user1615897

我想我終於成功了。我中間的的晚一些，從這個博客帖子的靈感：

http://bavotasan.com/2011/rotated-images-with-css3/

我所做的就是，創建裏面所有的表格單元格拿着我的圖片一個div類「image_box」：

<td><div class="image_box"><img class="landscape" src="CM04_F20_A1.jpg"></td></div>

然後改變了我的CSS來僅此：

<style type="text/css"> 
.image_box { 
    width: 192px; 
    height: 130px; 
    overflow: hidden; 
    position: relative; 
    border: 5px solid #eee; 
    }  
.portrait { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin: -96px 0 0 -65px; 
    } 
.landscape { 
    position: absolute; 
    left: 0px; 
    margin: 0px; 
    } 
</style>

當旋轉.portrait圖像的邊緣的大小是負resiz的一半大小的編輯圖像。

所以，結果是： http://i1163.photobucket.com/albums/q545/callyphage/contactSheet2.png

我希望這可以幫助別人，雖然我只在Chrome中嘗試過。

來源

2012-08-24 16:07:35 user1615897

用JqueryRotate旋轉圖像後調整表格TD

回答

相關問題