0

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>

これが結果です (ご覧のとおり、アーカイブ アルバムの特定のホルダーに保管されている 35 mm ネガ ストリップのリファレンス コンタクト シートを作成しようとしています)。

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

私が何をしても、Jqueryを介して回転された画像があるテーブル行の高さは、回転前の画像の高さに永続的に設定されているようです。(そのため、細胞は四角い形をしています。)

画像の上と下の空白をできるだけ取り除きたいのですが、できませんでした。テーブル行の高さを固定数 (たとえば 130 ピクセル) に設定しようとしましたが、役に立ちませんでした。

私は自分自身を明確にしたことを願っています。私はまったく新しいです。これらすべてを達成するには、もっと良い方法があるに違いないと感じています。

何か提案があればよろしくお願いします。

4

2 に答える 2

0

jquery呼び出しが実行された後（ヘッダーで想定）、TD.heightを強制するHTMLの最後（タグの前）にjavascriptまたはスタイルをロードする必要があるように思えます。

いいえ:

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

また：

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

パディングによって空白が生成される場合に備えて、コード内で cellpadding もゼロに設定してください。

最後の提案は、html ファイルをデスクトップに保存してクロムにロードし、TD で右クリックして「要素の検査」を選択し、CSS がどのように適用されているかを確認することです。

于 2012-08-23T16:45:50.447 に答える
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 に答える