Question

您好我有一个div background image和border-bottom image。我想让它变得敏感。我必须向height提供修复div，因此当我使其响应时，图像会响应，但边框和图像之间的距离会增加。这是我的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

我的问题是它在全宽范围内工作得很好。但是在不同的移动分辨率下，边框底部和图像之间的距离会增加。

Answer 1

替换你的班级

resolve: {
    load: function ($q, $ocLazyLoad) {
        let deferred = $q.defer();
        require.ensure([], function () {
            let module = require('./path/to/module.js');
            $ocLazyLoad.load({
                name: 'moduleName'               
            });
            deferred.resolve(module);
        });
        return deferred.promise;
    }
}

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

Answer 2

解决方案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>

解决方案2：使用padding-top属性

现在，如果您不想使用图像，可以使用此问题的第二个答案中描述的技术并设置填充顶部。

How to get div height to auto-adjust to background size?

这将为您的背景创建空间，并应设置为图像的高度/宽度比，以获得最佳效果。

然后你的CSS将是：

.top-info {
background: url("http://i.stack.imgur.com/prA95.jpg") no-repeat top center;
width: 100%
height: 0;
padding-top: 60%; /* This should be equal to (img-height / img-width * container-width) */
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;
}

你的HTML：

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

与背景图象和边界图象的敏感div

2 个答案: