Question

我能够在jQuery移动数据角色的头部插入一个图像，但是当我更改浏览器大小时，jpg不会随之改变。有人可以告诉我快速解决这个问题吗？

这是我的代码

<div data-role="page">
    <div data-role="header" class="page_header" >
        <img src="header_bg.jpg" >
    </div><!-- /header -->
    <div data-role="content">   
    <ul data-role="listview" data-inset="true">
    <li><a href="#">Products</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>   
    </div><!-- /content -->

</div><!-- /page -->

Answer 1

如果您只想用图片填充标题的背景，请尝试以下操作：

<div data-role="header" class="page_header" >
    <h1>Header</h1>
</div>

使用CSS为page_header类设置按百分比大小的背景图片：

.page_header {
    background-image: url("http://lorempixel.com/1400/50/abstract/");
    background-repeat:no-repeat;
    background-size: 100% 100%;
}

这是DEMO

如果你真的想要使用像你的例子中的图像标签，请将图像的宽度设置为100％：

.page_header img {
    width: 100%;
}

如何使jquery移动标题中的jpg调整到正在查看的窗口大小？

1 个答案: