css - 调整窗口大小时， Angular 图像不会移动到 Angular

Question

我遇到了一个我不太明白的问题。我希望有人会指出我哪里出错了，以便我可以修复它。 页面在手机和桌面上运行良好，但当我在桌面版上执行这些步骤时，我的顶 Angular 不会自动移动到上 Angular 。

1. 我手动将窗口调整到非常小(调整大小没问题)
2. 我点击按钮再次变大(调整大小即可)
3. 我单击按钮立即将其变小，但我的上 Angular 图像不会立即跳到上 Angular 。如果我只是在任何方向调整一个 px 的大小， Angular 落就会跳到 Angular 落。

HTML 图片 T-R

你可以看到 Angular 落如何不移动到想要的位置 Picture

我的 html:

/* I have another css for small devices, but it's same except instead of 32px is 21px */

body{
   font-family: Ubuntu, sans-serif;
   background: #f0e3df url("../img/page_border_line_top.png") repeat-x left top
}

#wrapper{
   position:absolute;
   bottom:0;
   min-width: 100%;
   max-height: 100%;
   background: transparent url("../img/page_border_line_bottom.png") repeat-x left bottom;
}

#border_left{
  float:left;
  width:32px;
  height:100%;
  background: transparent url("../img/page_border_line_left.png") repeat-y right bottom;
  margin:0;
  top:0;
  left:0;
  bottom:0;
}

#border_right{
  float:right;
  width:32px;
  height:100%;
  background: transparent url("../img/page_border_line_right.png") repeat-y right bottom;
  margin:0;
  top:0;
  right:0;
  bottom:0;
} 

#TL, #TR{
  position: absolute;
  top:0;
  bottom:auto;
  padding:0;
  margin:0;
  height:32px;
  width:32px;
}

#BL, #BR{
  position: absolute;
  bottom:0;
  top:auto;
  padding:0;
  margin:0;
  height:32px;
  width:32px;
}

<div id="wrapper">
  <div id="border_left">
    <img alt="corner top left" id="TL" src="img/page_border_corner_T-L.png" />
    <img alt="corner bottom left" id="BL" src="img/page_border_corner_B-L.png" />
  </div>

  <div id="border_right">
    <img alt="corner top right" id="TR" src="img/page_border_corner_T-R.png" />
    <img alt="corner bottom right" id="BR" src="img/page_border_corner_B-R.png" />
  </div>
</div>

感谢您的帮助!

Answer 1

好吧，没关系，我认为这甚至不是很好的练习，所以我在网上搜索了一下后用 3x3 网格制作了新的 CSS。

现在我唯一的问题是告诉 CSS 中间的 div(实际内容)应该在边缘内拉伸(stretch)。