Question

我正在使用bootstrap。这是我的代码。

HTML

<div class="choose1 hidden-xl hidden-lg hidden-md hidden-sm">
  <div class="container">
    <div class="row">
        <div class="col-md-12 col-xs-12">

        <table width="100%">
        <tr>
            <td align="center" style="padding:5px;"><a href="#"><img src="img/app_store.png" alt=""  style="height:auto; width:220px;" /></a></td>
        </tr>
        <tr>
            <td align="center" style="padding:5px;"><a href="#" ><img src="img/google_play.png" alt=""  style="height:auto; width:220px;" /></a></td>
        </tr>
        <tr>
            <td align="center" style="padding:5px;"><a href="#" ><img src="img/amazon.png" alt="" style="height:auto; width:220px;" /></a></td>
        </tr>
        </table>

        </div>
      </div>
  </div>
</div>

和CSS：

.choose1 {
    background: url('img/slides/1mobile.png') top center no-repeat;
    height: 320px;
    border: 1px solid red;
}

当我在小屏幕上检查图像时，横幅确实变小，而不是从div中滑出。请在小屏幕上查看实际网站here 。我应该这样做，使图像像div一样变换。

Answer 1

试试这个：

.choose1 {
background: url('img/slides/1mobile.png') top center no-repeat;
border: 1px solid red;
background-size: 100% auto;
}

随着分辨率的降低，图像不会缩小

1 个答案: