Адаптивные изображения в JSP - PullRequest
Новая
       9

Адаптивные изображения в JSP

0 голосов
/ 05 июня 2019

В моей компании есть старая страница 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%> предназначен для управления версиями наших ресурсов, так что все наши ресурсы могут быть использованы системой кэширования контента, если они когда-либо изменятся. В противном случае кэш контента займет несколько часов.

Может ли кто-нибудь предложить какие-либо советы по замене изображений при загрузке или изменении размера страницы на другую ширину?

...