Html 具有背景图像和边框图像的响应div

你好，我有一个背景图像和边框底部图像的div。我想让它反应灵敏。我必须给那个div一个固定的高度，所以当我使它有响应时，图像会有响应，但是边框和图像之间的距离会增加。这是我的密码

.顶部信息{ 背景：urlhttp://i.stack.imgur.com/prA95.jpg 无重复上止点； 高度：40雷姆； 背景尺寸：包含； 边框底部：10px实心透明； 边框图片：urlbg-about-us_border.png 30拉伸； -webkit边框图像：urlhttp://i.stack.imgur.com/SUUpP.png 拉伸30次； } 换班

.top-info {
  background: url("http://i.stack.imgur.com/prA95.jpg") no-repeat left 15px;
  height: 40rem;
  background-size: contain;
  border-top: 10px solid transparent;
  border-image: url("http://i.stack.imgur.com/SUUpP.png") 30 stretch;
  -webkit-border-image: url("http://i.stack.imgur.com/SUUpP.png") 30 stretch;

}

解决方案1：使用图像

背景不会改变包含它的div的大小。您正在固定容器的高度，无论背景的尺寸如何，此高度都是固定的。为什么不使用一个简单的图像呢

以下是您的CSS：

.top-info {
border-bottom: 10px solid transparent;
border-image: url("bg-about-us_border.png") 30 stretch;
-webkit-border-image: url("http://i.stack.imgur.com/SUUpP.png") 30 stretch;
}

以及您的html：

<div class="top-info">
<img src="http://i.stack.imgur.com/prA95.jpg" height=100% width=100%> 
</div>

<div class="top-info"></div>

以及您的html：

<div class="top-info">
<img src="http://i.stack.imgur.com/prA95.jpg" height=100% width=100%> 
</div>

<div class="top-info"></div>

---

提供更多信息。您的问题未完全描述我已编辑了我的que。我已解决了媒体查询的问题…：谢谢，谢谢，先生。但我不想要波德上衣。边框底部应该正好在图像后面。在不同大小的浏览器中，边框底部和图像之间不应存在任何1像素的距离。图像在所有页面中都是动态的，现在我无法更改，因此图像必须作为背景图像出现：