Question

我的公司有一个旧的JSP页面，我们正在尝试使其响应。当我浏览UX团队发送给我们的模板并尝试实现它们时，我正在同时学习响应式设计。我试图实现HTML / CSS响应式图像提示，其中HTML

<img srcset="examples/images/image-384.jpg 1x, 
             examples/images/image-768.jpg 2x">

和CSS

.img {
  background-image: url(examples/images/image-384.jpg); 
}
@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  .img {
    background-image: url(examples/images/image-768.jpg);
  }
}

但是，我发现此解决方案不适用于我的应用程序，但没有找到其他提示。

这是我在JSP中的位置：

<%-- <img class="formbackground"                          
srcset="resources/images/Group5209<%=staticAssetsVersionInfoIMAGES%>.jpg 1x,
resources/images/Group5209@2x<%=staticAssetsVersionInfoIMAGES%>.png 2x,
resources/images/Group5209@3x<%=staticAssetsVersionInfoIMAGES%>.png 3x"/> --%>

和CSS：

.formbackground{background: url(../images/Group5209@3x.png);

@media (min-width:682px) { 
.formbackground{
        background: url(../images/Group5209.jpg);
    }
}

@media (min-width:992px) {
    .formbackground{
        background: url(../images/Group5209@2x.png);
    }
}

注意：<%=staticAssetsVersionInfoIMAGES%>标签用于帮助我们进行资产版本控制，以便我们所有的资源（如果它们发生更改）都将在内容缓存系统中被提取。.否则，内容缓存需要花费几个小时才能捕获上。

有人可以提供任何技巧来使页面加载或调整为其他宽度时交换图像吗？

JSP中的响应式图像

0 个答案: