我想创建一个显示球员阵型的足球场。
主要问题是当 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>
当屏幕尺寸有很大差异(小/大)时,这会变得更难看。
对于这个设置会有更好的解决方案吗?
最佳答案
问题是您已将 .outer
的高度设置为 900px 并将背景大小设置为包含,这意味着它会缩放直到适合。
您可以声明 background-size: 100% 100%;
这将缩放图像以适应水平和垂直(必要时扭曲图像)。
但也许这不是您想要的,所以我认为您可以使用基本形状和 css-transforms(如果您愿意,也可以使用 svg)来绘制该字段,以便它适合 .outer
并且也许看起来比缩放图像更好。
关于html - 具有 CSS 背景图像的响应式元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35240418/