小屏幕上的背景图片放大？

Question

我有一个问题，随着屏幕变小，背景图像变大。我确实谷歌但没能解决这个问题。我正在使用Avada主题进行word press项目。这是我的link

我的CSS：

 .boost-din-uddannelser {
     background: url('http://arslankhalid.com/manning/wp-content/uploads/2015/11/12345_051.png');
     padding: 30px 22px;
     background-position: center center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
}

我的HTML：

<div class="fusion-one-third one_third fusion-layout-column fusion-spacing-yes boost-din-uddannelser" style="margin-top:0px;margin-bottom:20px;"><div class="fusion-column-wrapper"><div class="last-text">
<h3 data-fontsize="28" data-lineheight="28">BOOST DIN<br>
VÆRKTØJSKASSE<br>
SOM COACH ELLER<br>
LEDER</h3>
<p class="mid">Med to nye aften workshops.Få ny viden og værktøjer til at bruge coaching i virksomheder og til at udvikle teams.</p>
<p><a class="med" href="#">Læs mere</a></p>
</div>
<div class="fusion-clearfix"></div></div></div>

在放大屏幕上，它看起来像

但在小屏幕上看起来像

Answer 1

也许您可以使用background-size: contain;代替background-size: cover;

  

封面：将背景图片缩放到尽可能大，以便背景区域完全被背景覆盖   图片。背景图像的某些部分可能不在其中   背景定位区域

     

包含：将图片缩放到最大尺寸，使其宽度和高度都能够适合内容区域

现在如何将div设为一个等于左右两边的正方形？

width: 28vw;
height: 28vw;

当每个div得到这个宽度和高度时，它们总是sqare具有相同的宽度。

  

1vw =视口宽度的1％

     

1vh =视口高度的1％

并且在他们应该互相攻击的点上，您使用设置

的媒体查询

transform: translate(-50%);
margin-left: 50%;

这使div的响应中心。

也许你必须要玩它。：）