Question

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

这是我的代码：

<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;
}

我希望它有所帮助！

如何在页脚中放置图像

2 个答案: