Question

所以，作为一个新手，我只是迷失在我想要做的事情中：在我需要为我的工作设置的网上商店，我们正在使用Lightspeed（电子商务平台）的第三方模板。在这个主题中，我们有3个“突出”项目。这些是背景图像+重叠文本和显示产品的按钮。

我已将这些ID的最小高度设置为800px：

#highlight-1,#highlight-2,#highlight-3 {
   min-height: 800px;
}

到目前为止一切顺利，一切正常。但是现在，在一个移动平台上（是的，如果你愿意，你可以笑，因为你知道什么事情不会发生？），你猜对了：图像太大了。

我希望在纵向模式下将图像裁剪为（可能大约）一半大小的移动平台，因此图像的本质仍然保留，用户无需在到达终点前滑动约一公里的页面。

我能在我访问的.rain和.css文件中找到的唯一内容是：

#highlight-1{ background: url('highlight_1_image.jpg') no-repeat;}
#highlight-2{ background: url('highlight_2_image.jpg') no-repeat;}
#highlight-3{ background: url('highlight_3_image.jpg') no-repeat;}

我可以编辑它，我可以访问模板的自定义.css编辑器

任何可以帮助新手的人？提前谢谢！：）

Answer 1

理想的解决方案是使用媒体查询来提供较小的图像。这减少了可能使用有限数据的移动访问者的带宽，我相信这会对您在Google等中的网页排名产生影响。

#highlight-1{ background: url('highlight_1_image.jpg') no-repeat;}

@media screen and (max-width: 767px) {
    #highlight-1{ background: url('highlight_1_mobile_image.jpg') no-repeat;}
}

如果这不是一个选项，您可以使用background-size属性明确指定大小，或将其设置为cover（按比例放大或缩小以使图像的单个实例更加完整如果需要，可以使用裁剪覆盖元素）或contain（向上或向下缩放以使元素水平填充或垂直填充

通过CSS裁剪背景图像

1 个答案: