2

私は現在、写真を含む個人のウェブサイトに取り組んでいます。これらの写真のフレームを作成したかったので、フレームの写真を断片にスライスし、各部分を div にしました。これは、フレームの写真の特定の部分を引き伸ばしたいが、エッジは引き伸ばしたくないためです。たとえば、ここに私のテーブルがあります。

<table>
  <tr>
    <td height="93px" width="93px"><div id="photo_corner_topleft"></div></td>
    <td height="93px"><div id="photo_beggining_top"></div><div id="photo_side_top"></div><div id="photo_ending_top"></div></td>
    <td height="93px" width="93px"><div id="photo_corner_topright"></div></td>
 </tr>
 <tr>
  <td width="93px"><div id="photo_beggining_left"></div><div id="photo_side_left"></div><div id="photo_ending_left"></div></td>
  <td>
   <div id="photo_content" align="center">

<!-- HERE goes the photo. -->

   </div>
  </td>
  <td width="93px"><div id="photo_beggining_right"></div><div id="photo_side_right"></div>   <div id="photo_ending_right"></div></td>
 </tr>
 <tr>
  <td height="93px" width="93px"><div id="photo_corner_bottomleft"></div></td>
  <td><div id="photo_beggining_bottom"></div><div id="photo_side_bottom"></div><div id="photo_ending_bottom"></div></td>
  <td height="93px" width="93px"><div id="photo_corner_bottomright"></div></td>
 </tr>
</table>

したがって、「終わり」と「始まり」の div を押し出さずに、「photo_side_whatever」の div をできるだけ長くしたいと考えています。私は他の質問をチェックしましたが、まだそれを作ることができませんでした. ここに私のdivがあります:

#photo_side_left {
    min-height: 224px;
    width: 93px;
    height: auto;
    background-image: url(img/dynamic_frame/frame_09.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
4

2 に答える 2

0

これを div の先頭に挿入します。あなたの質問をよりよく理解できるように、これはどこかに住んでいますか？

    position:absolute;
于 2012-12-04T22:39:49.253 に答える
0

すべてのブラウザーで機能する方法はありません (CSS3background-sizeプロパティで実行できるはずですが、まだ完全にはサポートされていません)。最も簡単な方法は、<td>s 内の背景画像をフレームの小さなスライス (つまり、最も短い側で約 1 ～ 2 ピクセル) に設定し、繰り返すように設定することです。

何かのようなもの：

#photo_side_left {
background-image: url('img/dynamic_frame/frameslice.png');
background-repeat:repeat-y;
min-height: 224px;
width: 93px;
height: auto;
background-position: center;
background-repeat: no-repeat;
}

<td>編集: sを気にするのではなく、 に適用し<div>ます。td は常に適切なサイズになります ^^

于 2012-12-04T22:40:17.447 に答える