2015-02-12 4 views
0

Я использую пример списка clásico с эскизами, представленными в документации для мобильных устройств jquery. Но если я загружу изображения разных размеров, они не подходят для разрешения. Как это решить?Отзывчивые изображения в jQuery Mobile Listview

Код: http://demos.jquerymobile.com/1.4.5/listview/#&ui-state=dialog

+0

-квадратные ваши изображения? Если нет, в зависимости от используемого режима масштабирования, он может обрезать или исказить их. Если они искажены, вам может потребоваться изменить изображения так, чтобы они были квадратными. В идеале было бы хорошо создавать изображения специально для этого, которые составляют ровно 80 х 80 пикселей. –

ответ

1

Вы можете использовать CSS максимальную ширину и Max-высота

li.ui-li-has-thumb img { 
    max-width: 80px; 
    max-height: 80px; 
} 

или вы можете заставить размер вы хотите:

li.ui-li-has-thumb img { 
    width: 80px; 
    height: 80px; 
} 
+0

'max-height' и' max-width' могут быть решением, поэтому я проголосовал за это, несмотря на остальную часть CSS. Я действительно не думаю, что это хорошее решение. Если изображения большие, вычисления должны быть выполнены так, чтобы они были правильно масштабированы по вектору, что занимает время загрузки на стороне клиента. Вы должны масштабировать изображения на сервере, чтобы они были того же размера, что и их вывод. – PHPglue

+0

Итак, если изображение больше, то оно в основном создает меньший «порт просмотра», обрезающий остальную часть изображения, если он слишком большой? Похоже, что структура масштабирует изображение из документации, но я не уверен, как он обрабатывает неквадратные изображения. –

Смежные вопросы