Как установить одинаковый размер изображения для книжной и альбомной ориентации экрана в мобильном веб-приложении jquery?

Question

Я должен добавить изображение в заголовок и фон. Я добавил изображение заголовка, используя следующий код

<div data-role="header" data-nobackbtn="false" data-theme="a" style="height:30px;background-image:url(test.jpg);background-repeat:no-repeat;">

изображение идеально зафиксировано на портрете, но когда экран сменится на альбомную, изображение не будет зафиксировано идеально, после изображения будет добавлено пустое пространство. Итак, как настроить изображение одинаково для книжной и альбомной ориентации экрана. Эта проблема возникает в Android, iPhone, BlackBerry и т. Д. Для более подробной информации, пожалуйста, проверьте заголовок изображения.

на самом деле, когда установлена ​​ширина: авто или 100% не работает, потому что изображение имеет фиксированную ширину, например, я устанавливаю ширину изображения как 360 пикселей в портретной ориентации, когда при изменении ландшафта ширина изображения остается такой же, то есть эта проблема. Мы не можем установить большую ширину для альбомной ориентации, потому что мы не можем сказать, что размер экрана для всех платформ в ландшафтном режиме одинаков. которые могут различаться в Android, iphone и т. д.

Answer 1

Вы можете установить тег div, чтобы скрыть переполнение, затем установить обычный тег img внутри div и установить ширину 100% ...

<div data-role="header">
<a data-icon="arrow-l" data-rel="back" href="#" style="z-index:1001;">Back</a>
<div style="overflow:hidden; position:relative; width:100%; height:45px;">
<img src="test.jpg" style="width:100%; height:auto; position:relative;">
</div>
</div>

Некоторые примечания:

• "высота: авто;"sytle на изображении можно удалить, если вы в порядке с искажением пропорций изображения при его масштабировании.
• the "z-index: 1001;"стиль ссылки назад необходим, потому что заголовок имеет z-индекс 1000 (поэтому div вокруг изображения также получает z-индекс 1000, если не указано).