使用 jquery mobile 调整图像大小以适应移动设备的屏幕

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21422648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:33:54  来源:igfitidea点击:

image resize to fit screen on mobile device using jquery mobile

jquerycssjquery-mobileibm-mobilefirst

提问by svd

I want to know if we can resize an image to fit the screen. Right now the image is suitable for iphone 5s, but it does not resize to another device or tablet to fit the screen.

我想知道我们是否可以调整图像大小以适应屏幕。目前该图像适用于 iphone 5s,但它不会调整到其他设备或平板电脑以适应屏幕。

I want to know if anyone has idea of how to resize to fit the screen.

我想知道是否有人知道如何调整大小以适应屏幕。

This is my code.

这是我的代码。

<img alt="" src="images/main1.jpg" style="width:100%;height:auto;position:absolute;z-index:500"></img>

回答by Suchan Lee

What you want to do is to put the image inside a div whose width is set to be some percentage of the full screen width. This will always fit the image to be the width of the screen.

您想要做的是将图像放在一个 div 中,该 div 的宽度设置为全屏宽度的某个百分比。这将始终使图像适合屏幕的宽度。

sample code:

示例代码:

<body>
    <div style="width: 100%;">
        <img alt="" src="images/main1.jpg" style="width: 100%;">
    </div>
</body>

JSFiddle: http://jsfiddle.net/5unWm/

JSFiddle:http: //jsfiddle.net/5unWm/