html图片自动适应屏幕代码,css让图片宽度自适应屏幕的例子

宽度自适应就是根据屏幕大小自动缩放了下面我们来看一篇关于css让图片宽度自适应屏幕的例子，具体的操作细节如下文所示，希望文章能够对各位有帮助。

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

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

css代码：

CSS

@media screen and (max-width: 768px){

.img-width{

margin: auto -15px;

}

}

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

JS代码：

$image = $(".post-content img");

$image.parent('p').addClass('img-width');

$image.addClass('img-responsive center-block');

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

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

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

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

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

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

@viewport

{

zoom: 1.0;

width: 620px;

}

@-ms-viewport

{

width: 620px;

zoom: 1.0;

}

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');

}