Question

我有一个Filemaker摄影数据库，我正在尝试生成35mm底片的联系表。

我使用脚本动态创建一个在Web查看器中呈现的简单html表。

我使用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>

这是结果（正如您所看到的，我正在尝试为存档在档案相册的一个给定持有者中的35mm负片创建参考联系表）：

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

无论我做什么，表格中通过Jquery旋转的图像行的高度似乎都会在旋转前持续设置为图像的高度。（这就是为什么细胞具有方形外观。）

我想尽可能多地摆脱图像下方的白色空间，但却无法做到。我试图将表格行的高度设置为固定数字（例如，130 px），但无济于事。

我希望我已经说清楚了。我对这一切都很陌生。我觉得必须有更好的方法来实现这一切。

如果有任何建议，我将不胜感激。

Answer 1

在我看来，你需要在运行jquery调用后强制TD.height的HTML末尾（在标记之前）加载javascript或样式（在我的标题中假设）。

IE：

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

或：

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

确保在代码中将cellpadding设置为零，以防填充生成空格。

最后的建议是将html文件保存到桌面并将其加载到chrome中，右键单击并在TD上选择“inspect element”以查看CSS的应用方式。

Answer 2

我想我终于成功了。我从这篇博文中得到了一些深夜的灵感：

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图像的边距大小为调整后的图像大小的一半。

结果是： http://i1163.photobucket.com/albums/q545/callyphage/contactSheet2.png

我希望这有助于其他人，但我只是在Chrome中尝试过。

使用JqueryRotate旋转图像后调整表格大小

2 个答案: