Css 标题安全覆盖背景图像

不久之后，我们有了很棒的

背景大小：cover

和

背景大小：contain

CSS属性

我要寻找的是一种实现两者结合的方法。让我们称之为“标题安全”区域

基本上，在我的背景中，每个轴上都有一个区域，如果边界框的大小不合适，则该区域消失/修剪就可以了，但有一个内部区域绝对必须可见，我们可以使用字母框来确保这一点

更多信息：

• 我的背景图像的纵横比为3:2
• 例如，这可能是300 x 200px
• 在4:3的屏幕上观看，这将成为266.66 x 200px
• 在16:9屏幕上查看，这将变成300 x 168.75像素

---

这两个4:3和16:9比率内的内盒面积为266.666 x 168.75 px。我想确保如果人们在其他/更奇怪的纵横比上观看图像，内部区域始终可见，我称之为“标题安全区域”。

您可以有3种不同的样式，并根据纵横比通过媒体查询来更改它们

我还改变了边框的颜色，这样很容易知道哪种样式适用

html，正文{
身高：100%；
}
.测试{
宽度：90%；
身高：90%；
边框：纯色2px黑色；
保证金：自动；
背景：url(http://i.stack.imgur.com/ZmhEE.jpg);
背景位置：中心；
背景重复：无重复；
背景大小：包含；/*由媒体查询更改*/
}
@媒体屏幕和（最小纵横比：16/9）{
.测试{
边框：纯红2px；
背景尺寸：自动120%；
}
}
@媒体屏幕和（最大纵横比：4/3）{
.测试{
边框：纯绿2px；
背景尺寸：120%自动；
}
}

我想出来了

以下面的html文档为例：

<div class="container">
  <div class="inner">
  </div>
</div>

然后，内部css需要以下规则才能正确运行：

.inner {
  /* Set the background image. Must be 3:2 aspect ratio! */
  background-image: url('background.jpg');

  /* Fill up the container.*/
  width: 100%;
  height: 100%;

  /* This is the default in any browser, but many people set it to
     border-box these days for every element. It must be "content-box"
     for this to work. The key thing here is that the width/height
     cannot include the padding.
   */
  box-sizing: content-box;

  /* Normal CSS contain behavior */
  background-size: contain;
  background-repeat: no-repeat;

  /* Always go to the center */
  background-position: center center;

  /* This will cause the background to extend beyond the content and
     into the padding.
   */
  background-clip: padding-box;

  /* These numbers are just based on trial and error and not exact.
     I tried to figure it out with Math, but my math was wrong. These
     are fairly close approximations.

     Effectively the width + the padding becomes the total 3:2 image
     and the total image MINUS the padding = the title safe area.
   */
  padding: 6% 8% 6% 8%;

  /*
     These margins ensure that the image is still centered.
     The overflow:hidden on the container element make sure that
     there's no scrollbars.
   */
  margin-left: -8%;
  margin-top: -6%;

}

---

不幸的是，对我来说，这不是屏幕纵横比，而是父元素。那么，据我所知，没有CSS解决方案。。。我希望我错了：-）我担心=）想出了一个办法。如果你好奇的话，请阅读我自己的答案=）谢谢你的关注！

.inner {
  /* Set the background image. Must be 3:2 aspect ratio! */
  background-image: url('background.jpg');

  /* Fill up the container.*/
  width: 100%;
  height: 100%;

  /* This is the default in any browser, but many people set it to
     border-box these days for every element. It must be "content-box"
     for this to work. The key thing here is that the width/height
     cannot include the padding.
   */
  box-sizing: content-box;

  /* Normal CSS contain behavior */
  background-size: contain;
  background-repeat: no-repeat;

  /* Always go to the center */
  background-position: center center;

  /* This will cause the background to extend beyond the content and
     into the padding.
   */
  background-clip: padding-box;

  /* These numbers are just based on trial and error and not exact.
     I tried to figure it out with Math, but my math was wrong. These
     are fairly close approximations.

     Effectively the width + the padding becomes the total 3:2 image
     and the total image MINUS the padding = the title safe area.
   */
  padding: 6% 8% 6% 8%;

  /*
     These margins ensure that the image is still centered.
     The overflow:hidden on the container element make sure that
     there's no scrollbars.
   */
  margin-left: -8%;
  margin-top: -6%;

}