css - 如何让图片适合页脚

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

你可以试试:

.adsspace {
   width:100vw;
}

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

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

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

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

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

希望对您有所帮助!