html - 如何避免在平板电脑和手机等小型设备中挤压和保持图像的纵横比

Question

我正在为我的手机和平板电脑网站使用横幅。横幅尺寸为278*386。横幅在平板电脑和手机上越来越被挤压。我将横幅用作 Div 的 background-image 属性。这是我的 div CSS。

对于平板电脑:

@media (max-width: 767px) and (min-width: 480px){
.masthead {
color: #fff;
margin-bottom: 40px;
font-size: 18px;
line-height: 30px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
background-image: url('https://website.com/banner_mobile_11.jpg');
height: 475px;
position: relative;
top: 105px;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
}

}如果我使用 background-size: contain; 它不会覆盖整个屏幕宽度并留出空间但我想要全宽横幅，如果我使用 background-size: Cover; 它被拉长了。移动设备也是如此。

HTML:

<div class="parenthead">
<div class="masthead">
<div class="container">
<div class="row">
<div class="span6">
<h1>Connect with us!</h1>
<p>iFixandRepair helps get your mobile device back up and running again,     servicing screen replacement, speaker repair, & more on phones, tablets, & computers.</p>
<div class="social_button">
<a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" class="btn btn-primary btn-large" target="_blank" onclick="track_event('External Link', 'Facebook Home')">
<i class="icon-facebook"></i> Facebook
</a>
<a href="http://www.twitter.com/iFixandRepairW" class="btn btn-info btn-large" target="_blank" onclick="track_event('External Link', 'Twitter Home')">
<i class="icon-twitter"></i> Twitter
</a>
<a href="tel:+5619078349" class="btn btn-call btn-large">
<i class="icon-phone"></i> Call Us</a>
</a>
</div>
        </div>
    </div>
 </div>
 </div>
 </div>

横幅:

Answer 1

[与 OP 聊天后的附加信息]

有 2 种方法可以调整横幅大小并保持相同的纵横比(按比例)。

方法一是使用 background-size:cover。它将裁剪额外的高度/宽度并使您的横幅适合。在 http://codepen.io/williamli/pen/MKmjxE我们用

background-size: cover;

方法二是让高度(在这种情况下)随着宽度的增加而扩大。在下面的代码笔中，仍然基于您的代码，一个正常的 <img>用于实现此目的。定位 css 用于在文本下“滑动”您的横幅。 http://codepen.io/williamli/pen/wMdovW .例如:

z-index:1;

[原始答案]

background-size: cover 应该可以。它不会拉伸(stretch)，它应该通过裁剪掉一些额外的部分使您的背景图像以相同的纵横比覆盖整个 div。

通过使用响应式 div(使用媒体查询)和 background-size: cover，这就是当今大多数人处理网络响应式横幅的方式。

示例:前几天我正在为 http://venna.co 的首页处理此页面.检查一下，它的前面有一个响应式横幅，它会在您的视口(viewport)大小更改时更改大小。

查看此 codepen使用

background-size: cover;

当屏幕尺寸变化时，女孩的头部是成比例的。