Блог

Я интегрирую jQuery Mobile с миниатюрами просмотров списков, но он изменяет размер моих изображений на лету до фиксированной ширины. Изменение ширины .ui-li-thumb не помогает. Как сделать мои пальцы шире?

Попробуйте это и включите «, .ui-li-icon»!

 .ui-li-thumb, .ui-li-icon {
    left: 1px;
    max-height: 60px; 
    max-width: 60px;
    position: absolute;
    top: 0;
}
  

Это приводит к увеличению размера миниатюр до 60 * 60 пикселей .. в моем случае работает с любым размером.

Если это не сработает, предоставьте часть своего кода, чтобы увидеть, что не так (HTML, JS, CSS).

Я хотел уменьшить миниатюры в listview. Вот как я это сделал с jQuery Mobile версией 1.4.2 :

 .ui-listview .ui-li-has-thumb > img:first-child,
.ui-listview .ui-li-has-thumb > .ui-btn > img:first-child,
.ui-listview .ui-li-has-thumb .ui-li-thumb {
    left: 1px;
    top: 1px;
    max-height: 40px;
    max-width: 40px;
}
.ui-listview > .ui-li-has-thumb > .ui-btn,
.ui-listview > .ui-li-static.ui-li-has-thumb {
    min-height: 0;
    padding: .7em 1em .7em 55px;
}
  

Верхний, левый и нижний отступы, которые я определил выше, предназначены только для того, чтобы вернуть этим значениям отступов значения по умолчанию ui-btn . Изображение расположено абсолютно в элементе listview, поэтому, если вы хотите увеличить изображение, вы должны компенсировать это, увеличив свойство min-height css, показанное выше.

Для меня это решение работает нормально в списке. Он также настраивает заполнение внутреннего текста с большого пальца.

 .ui-listview .ui-li-icon{
    max-height: 32px; 
    max-width: 32px;
}
.ui-li-static.ui-li-has-icon{
    padding-left:50px;
}
  

Это делается для случая, когда к изображению применен класс .ui-li-icon