如何适应在页脚图像

我希望把图像中的页脚（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像素

谢谢

来源

2017-08-16 Def

'width：100％'有什么问题？ –

我已经使用宽度：100％之前，但它不工作 – Def

您可以尝试使用：

.adsspace { 
    width:100vw; 
}

这将授予图像的宽度始终适应浏览器的宽度。但是，您必须考虑到图像高度也会增加。如果您需要固定尺寸的工作，你可以用object-fit规则尝试，这样的：

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

然后你需要以及应用它在媒体查询，指定新的尺寸。

如果图像文件的原始尺寸与页脚比例不完全匹配，则图像将显示失真。在这种情况下，object-fit: cover可能更适合：

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

我希望它有帮助！

来源

2017-08-16 06:15:57 Tedds

谢谢你的工作 – Def

不客气！ – Tedds

@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>

来源

2017-08-16 05:17:06

如何适应在页脚图像

回答

相关问题