Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css让图片宽度自适应屏幕的例子

css让图片宽度自适应屏幕的例子

发布时间:2020-05-07   编辑:www.jquerycn.cn
jquery中文网为您提供css让图片宽度自适应屏幕的例子等资源,欢迎您收藏本站,我们将为您提供最新的css让图片宽度自适应屏幕的例子资源
宽度自适应就是根据屏幕大小自动缩放了下面我们来看一篇关于css让图片宽度自适应屏幕的例子,具体的操作细节如下文所示,希望文章能够对各位有帮助。

手机浏览自适应网页,Safari浏览器往往能自动识别并排版,图片宽度是占满屏幕的,那么在不用阅读器的时候如何做成这样的效果呢?如图,这里要让图片宽度占满屏幕。

因为图片是在一个p标签内,而且是Markdown转换成html格式的,所以需要用jquery动态把样式加给这个p标签。

css代码:

CSS

@media screen and (max-width: 768px){
    .img-width{
        margin: auto -15px;
    }
}


这里用CSS 3媒体查询自适应手机屏幕。

JS代码:


<script type="text/javascript">
    $image = $(".post-content img");
    $image.parent('p').addClass('img-width');
    $image.addClass('img-responsive center-block');
</script>

这样效果就实现了,运行gulp命令重新压缩css和js文件。


在网页中设置的1px与物理像素中的1px不会相同,所以导致不同在不同手机上显示结果都不相同,通过以下设置找到了适合当前网页自适应不同手机、不同浏览器的办法,代码如下:

[html] view plain copy 在CODE上查看代码片派生到我的代码片

<meta name="viewport" content="width=620px,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=1,maximum-scale=1,user-scalable=1" /> 

其中的width=620px就是网页内容区需要的最小宽度,需要在不同手机上刚好全屏显示,target-densitydpi=device-dpi设置后,css中的1px就会等于物理像素中的1px。

补充:由于safari浏览器不支持target-densitydpi=device-dpi,所以加入JS代码自动调整缩放比例,调整后的代码:

[html] view plain copy 在CODE上查看代码片派生到我的代码片

<style type="text/css"> 
@viewport 

    zoom: 1.0; 
    width: 620px; 

@-ms-viewport 

    width: 620px; 
    zoom: 1.0; 
}</style> 
<meta name="viewport" id="WebViewport" content="width=620px,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1" /> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta name="format-detection" content="telephone=no"> 
<script language="javascript"> 
if(screen.width<620) 

    document.getElementById('WebViewport').setAttribute('content', 'width=620px,initial-scale=' screen.width / 620 ',target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1'); 

</script> 

您可能感兴趣的文章:
js判断屏幕分辨率的小例子
JS获取图片宽高并根据图片大小自适应
手机浏览器图片自适应高度问题解决办法
js双击鼠标自动滚动屏幕实例
JS获取屏幕尺寸大小实例
js获取屏幕分辨率示例
jQuery实现等比例缩放大图片让大图片自适应页面布局
js获取屏幕宽度实例代码
基于jquery的跟随屏幕滚动代码
js获取浏览器窗口大小与屏幕宽高

[关闭]