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并且看起来可能比缩放更好图像。

Answer 2

包含的问题在于它假设图像在此时适合容器的大小900像素高（.outer），因此玩家的定位实际上是正确的。如果实际图像是900px那么这将完美地工作。

我所做的只是为.outer

添加一个静态大小

fiddle

 .outer {
   width:500px ;
   height:163px;
 }

很抱歉编辑其他答案：s

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

2 个答案: