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');
}
html图片自动适应屏幕代码,css让图片宽度自适应屏幕的例子相关推荐
- html中如何使图片自动旋转90度,css实现图片旋转90度的方法
css实现图片旋转90度的方法 发布时间:2020-08-31 11:44:39 来源:亿速云 阅读:550 作者:小新 小编给大家分享一下css实现图片旋转90度的方法,相信大部分人都还不怎么了解, ...
- html中图片自动循环滚动代码,实现长图片自动循环滚动效果
实现思路 滚动效果用实现.有个方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里种定位滚动方式演示.每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效 ...
- html让图片自动旋转360,html5 canvas 360图片旋转制作抽奖转盘代码
特效描述:html5canvas 360图片旋转 抽奖转盘代码.60图片旋转制作抽奖转盘代码 代码结构 1. HTML代码 var colors = ["#B8D430", &qu ...
- 一个注册页面的前端模板(html+css+javascript)可自适应屏幕
一个注册页面的前端模板(html+css+javascript)可自适应屏幕,修改样式即可用. 截图 代码 <!DOCTYPE html> <html><head> ...
- WordPress彻底禁用上传媒体图片自动生成缩略图及多尺寸图片(亲测可用)
WordPress默认上传图片的时候会自动生成缩略图及多尺寸的图片文件,大部分网站都用不到这些多余的图片,不仅仅占用空间,而且上传的时候还会消耗额外的性能. 下面仅需两段函数代码即可彻底禁用该功能. ...
- ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化
ecshop图片自动本地化插件,ECSHOP下载商品图片,ECSHOP商品详情远程图片,ecshop商品远程图片保存,ecshop图片自动本地化插件,商品图片本地化,图片远程本地化插件,ecshop远 ...
- Python 图片透明化:使用代码轻松实现图片的透明化效果
Python 图片透明化:使用代码轻松实现图片的透明化效果 在图像处理中,透明化是一个非常有用的技术.透明化可以让图像更加美观,使得我们可以轻松地将多张图片合成一张图片,同时还可以为图像添加各种特效. ...
- html图片自动适应窗口大小,使用CSS自动调整浏览器大小的图片大小
当我调整浏览器窗口大小时,我想要所有(或只是一些)我的图片自动调整大小. 我发现了以下代码 – 它不做任何事情,虽然. HTML CSS body { font-family: Arial; font ...
- 怎么修改背景图片大小的HTML代码,css如何改变背景图片大小?
我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题.那么css如何改变背景图片大小?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,想要改变背景图片的大小,可 ...
- html div 自动适应屏幕,css怎么让高度自适应屏幕高度?
在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度.下面我们来看一下css设置高度自适应屏幕高度的方法. 首先,我们刚开始设计 ...
最新文章
- 末日来临,你的编程语言能干嘛? | 每日趣闻
- [转载]IE678兼容性前缀区分
- linux top命令增强版 htop简介
- 【Google Play】IARC 年龄分级 ( IARC 国际年龄分级联盟 | Google Play 设置应用年龄分级 )
- 修改ubuntu 的dns
- IntellIJ IDEA 配置 Maven 以及 修改 默认 Repository
- shell if else 用法 syntax error near unexpected token `then'
- js鼠标移动到指定位置_Python: pyautogui模块之鼠标控制
- MySql连接异常解决
- 如何更有价值采集数据、高效分析数据?
- mui获取php表格,Mui table实现数据提取方法
- flash中物体运动基础之七---------碰撞处理
- 南开大学计算机专业考研经验贴,南开大学计算机考研初试经验
- 番茄todo电脑版_TODO清单|高效时间管理 支持多平台多设备同步 解锁VIP
- 谈谈c++纯虚函数的意义!
- 电机学、电机拖动相关知识(试着更新电机的相关知识,感谢指出错误)
- 大疆推出Avata无人机以及飞行眼镜Goggles 2
- 泰坦尼克号幸存者预测所用函数
- 2018前端精品面试文章总结
- 简单观察HoudiniAssetComponent状态(AssetState)的变化过程