Question

我目前正在开设一个包含图片的个人网站。我想为这些图片创建一个框架，所以我将框架的照片切成碎片并使每个部分成为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：

#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;
}

Answer 1

在div的开头插入。这是否在任何地方都有，所以我可以更好地理解你的问题？

    position:absolute;

Answer 2

没有办法可以在所有浏览器中使用它（CSS3 background-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>。 td将始终是正确的大小^^

在表格单元格中尽可能地拉伸div

2 个答案: