如何让图片适合页脚

Question

我想在页脚中放一张图片（jquery 手机），如何使该图像适合页脚的宽度（智能手机的不同宽度）

这是我的代码：

<div data-role="footer" data-position="fixed">
 <div class="adsspace"><img id="myads" src="ads.gif"></div>
</div>

这是我的 css 示例

@media only screen and (max-device-width:767px){
    .adsspace{
            width:767px;
            height:50px;
            }
    .adsspace div, .adsspace img {
            position:relative;
            max-width: 767px;
            max-height: 50px;
            }
}

我的 ads.gif 的宽度和高度：1200 * 180 像素

谢谢你

Answer 1

@media only screen and (max-device-width:767px){
    .adsspace{
            width:100%;
            height:100%;
            }
    .adsspace div, .adsspace img {
            position:relative;
        }
}

<div data-role="footer" data-position="fixed">
 <div class="adsspace"><img id="myads" src="http://1.bp.blogspot.com/-GQ4s4jpyCOE/T4Zi23RtGFI/AAAAAAAAAr8/tdnhfESXJRM/s320/google+giant+face.png"></div>
</div>

Answer 2

您可以尝试：

.adsspace {
   width:100vw;
}

它将使图像宽度始终适应浏览器的宽度。但是，您必须考虑到图像高度也会增加。如果您需要使用固定维度，您可以尝试使用 object-fit 规则，例如：

#myads  {
  width:1200px;
  height:50px;
  object-fit: fill;
}

然后您还需要在媒体查询中应用它，指定新的维度。

如果图片文件的原始尺寸与页脚比例不完全匹配，则图片会出现变形。在那种情况下 object-fit: cover 可能更合适：

#myads  {
  width:1200px;
  height:50px;
  object-fit: cover;
}

希望对您有所帮助！

如何让图片适合页脚

how to fit an image in footer

css

jquery-mobile