html - 具有 CSS 背景图像的响应式元素

Question

我想创建一个显示球员阵型的足球场。

主要问题是当 background-size 设置为 contain 时，阵型位置相对于足球场。 https://jsfiddle.net/ypvonhhy/1/

我想到的最佳解决方案是让高度保持不变: https://jsfiddle.net/a4y9dqqo/3/

 .outer {
   width: 100%;
   height: 900px;
 }
 
 section.field {
    width: 100%;
    min-height: 200px;
    max-height: 320px;
    background: url('http://s16.postimg.org/c5a4is9sl/field.png') no-repeat;
    background-size: 100% 100%;
    position: relative;;
  }
  
.player {
    font-size: 1.2rem;
    position: absolute;
}

<div class="outer">

  <section class="field">

    <i class="player" style="left: 28%; top: 14%;">*</i> 
    <i class="player" style="left: 39%; top: 9%;">*</i>
    <i class="player" style="left: 58%; top: 9%;">*</i>
    <i class="player" style="left: 69%; top: 14%;">*</i>

  </section>

</div>

当屏幕尺寸有很大差异(小/大)时，这会变得更难看。

对于这个设置会有更好的解决方案吗？

Answer 1

问题是您已将 .outer 的高度设置为 900px 并将背景大小设置为包含，这意味着它会缩放直到适合。

您可以声明 background-size: 100% 100%; 这将缩放图像以适应水平和垂直(必要时扭曲图像)。

但也许这不是您想要的，所以我认为您可以使用基本形状和 css-transforms(如果您愿意，也可以使用 svg)来绘制该字段，以便它适合 .outer 并且也许看起来比缩放图像更好。