html - 具有背景图像和边框图像的响应式 div

Question

你好，我有一个 div，带有 background image 和 border-bottom image。我想让它响应。我必须修复 height 到那个 div 所以当我让它响应图像响应时，但边框和图像之间的距离增加。这是我的代码。

.top-info {
  background: url("http://i.stack.imgur.com/prA95.jpg") no-repeat top center;
  height: 40rem;
  background-size: contain;
  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;
}

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

我的问题是它在全宽下运行良好。但是在不同的移动分辨率下，border-bottom 和图像之间的距离会增加。

Answer 1

替换你的类

.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;

}

https://jsfiddle.net/8m9dop2c/1/