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属性应该可以做到，但 AFAIK 尚不完全支持）。我认为最简单的做法是将<td>s 内的背景图像设置为帧的一小部分（我的意思是最短边大约 1-2px），设置为重复。

就像是：

#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>，而不是打扰<div>s。td 永远是正确的大小^^

于 2012-12-04T22:40:17.447 回答