0

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

我使用脚本动态创建在 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>

这是结果（如您所见，我正在尝试为保存在档案相册的一个给定支架中的 35 毫米负片条创建参考联系表）：

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

无论我做什么，已经通过 Jquery 旋转的图像的表格行的高度似乎一直设置为旋转前图像的高度。（这就是细胞具有方形外观的原因。）

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

我希望我已经说清楚了。我对这一切都很陌生。我有一种感觉，必须有更好的方法来完成这一切。

我将不胜感激任何建议。

4

2 回答 2

0

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

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 中尝试过。

于 2012-08-24T16:07:35.283 回答
0

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

IE：

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

或者：

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

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

最后的建议是将 html 文件保存到桌面并在 chrome 中加载，右键单击并在 TD 上选择“检查元素”以查看 CSS 是如何应用的。

于 2012-08-23T16:45:50.447 回答