css - 标题安全覆盖背景图像

Question

一段时间以来，我们有了很棒的 background-size: cover 和 background-size: contain CSS 属性。

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

基本上在我的背景中，每个轴上都有一个区域，如果边界框尺寸不合适，它会消失/裁剪，但有一个内部区域绝对必须可见，我们可以使用信箱来确保这是真的。

更多信息:

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

这两种 4:3 和 16:9 比例内的内框面积为 266.666 x 168.75 像素。我想确保如果人们以其他/更奇怪的纵横比观看图像，内部区域始终保持可见，我将其称为“标题安全区域”。

Answer 1

你可以有 3 种不同的样式，并根据宽高比用媒体查询改变它们

我还更改了边框颜色，以便很容易知道适用哪种样式

html, body {
  height: 100%;
}

.test {
  width: 90%;
  height: 90%;
  border: solid 2px black;
  margin: auto;
  background: url(http://i.stack.imgur.com/ZmhEE.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;   /* changed by media queries */
}

@media screen and (min-aspect-ratio: 16/9) { 
  .test {
      border: solid red 2px; 
      background-size: auto 120%;
  }
}
@media screen and (max-aspect-ratio: 4/3) { 
   .test {
        border: solid green 2px;
        background-size: 120% auto;
    }
}

<div class="test"></div>