关于在移动网页中图片自适应大小的写法

一般在移动网页时,图片属性写成如下就可以达到自适应大小

<style type="text/css">
.nameg{background: rgba(000,000,000,0.6);}
.nameg div{float: left;}
.nameg .a1{width: 10%;background:#000000;}
.nameg .a1 img{width: 100%;height: 100%;display: block;}
.nameg .a2{width: 90%}
</style>
<div class="nameg clearfix">
    <div class="a1">
        <img src="iconfont-close..png">
    </div>
    <div class="a2"></div>
</div>

若在某些特殊时候图片会出现宽度自动高度却拉伸的情况下,可以用以下写法(max-width: 100%; height:auto;display: block;)

注:做用户图像图片时最好使用1比1标准尺寸图片,且要有默认图片,否则在占位符时或找不到图片时依然会出现拉伸现象

<style type="text/css">
.nameg{background: rgba(000,000,000,0.6);}
.nameg div{float: left;}
.nameg .a1{width: 10%;background:#000000;}
.nameg .a1 img{max-width: 100%; height:auto;display: block;}
.nameg .a2{width: 90%}
</style>
<div class="nameg clearfix">
    <div class="a1">
        <img src="iconfont-close..png">
    </div>
    <div class="a2"></div>
</div>
时间: 2024-10-23 23:14:03

关于在移动网页中图片自适应大小的写法的相关文章

网页宽高自适应大小

如今,显示器的分辨率越来越多,终端也变得多样化,web开发页面的自适应问题越来越多,如果不做处理,一旦显示器的分辨率发生变化,展示的内容可能出现许多意料之外的排版问题.关于不同终端的展示问题可以通过响应式布局来实现,而不需要响应式布局时我们需要自己来避免上述问题. 宽度自适应: 1.设置最外层容器(如 DIV)的 width 为 100%: 2.如果网站头部有图片展示,那就不能简单设置宽度为 100%,会出现 repeat 的情况,或者图片大小超出最外层容器宽度,此时可以设置最外层容器宽度为固定

使用Jsoup解决网页中图片链接问题

在做Facebook和WhatsApp分享的时候,分享出去的谷歌短链,Facebook获取不到大图,和竞品展示的不一样,WhatsApp分享出去的短链没有图片和描述. WhatsApp: 分析竞品UCNews,发现他们分享出去的WhatsApp链接指向的网页,在meat标签中添加了相关的属性,然后在自己的站中加入相关标签,问题解决. <meta property="og:image" content="http://img.masala-sg.goldenmob.com

微信端网页中图片的展示方式

一.微信端网页中图片的展示方式 微信端网页中图片有两种展示方式:平铺与图集.平铺的时候文档内的所有图片全部展开,点击图片则放大.图集的时候只展示一张图片,点击图片的时候以翻页的方式展示一组图片.实现原理对于如下一个图片标签,data-gid用于存放组标识,同一组的data-gid相同.data-index用于存放组中图片的展示顺序,不能相同.onclick中根据data-src处理图片展示.对于图集就只显示一张其他的img设置为隐藏,src与第一个图片一样,或者为空,这样可以减少网页的加载量,提

php获取网页中图片与DIV内容实例

分享下php获取网页中图片.DIV内容的简单方法,都是通过正则表达式实现的. 1.获取网页中所有的图片: <?php //取得指定位址的內容,并储存至 $text $text=file_get_contents('http://www.jbxue.com/'); //取得所有img标签,并储存至二维数组 $match 中 preg_match_all('/<img[^>]*>/i', $text, $match); //打印出match print_r($match); ?>

网页中图片旋转的几种实现方式

网页中图片旋转一般有下面三种常见的实现方式: 一. ie 滤镜 IE的图形旋转滤镜,通过指定BasicImage滤镜的rotation值旋转元素,旋转方向为顺时针,旋转的中心点为元素的左上角.rotation可以有4个旋转值:0, 1, 2,和3分别表示将元素旋转0度.90度.180度.270度. 浏览器支持: IE5.5+ CSS代码: .rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } JS

一个用来提取网页中图片的小工具

public Array MatchHtml(string html,string com) { List<string> urls = new List<string>(); html = html.ToLower(); //获取SRC标签中的URL Regex regexSrc = new Regex("src=\"[^\"]*[(.jpg)(.png)(.gif)(.bmp)(.ico)]\""); foreach(Match

网页中图片的垂直居中对齐

相信很多前端开发人员都曾遇到过需要将图片设置为垂直居中对齐的经历,我刚好在之前的一个项目刚刚解决了这个问题,使用的方法非常简单,兼容性也很好.具体做法如下: 1.只需要兼容各大现代浏览器: 父元素{ display:teble-cell; width:Npx; height:Npx; vertical-align:middle;} 2.如果要兼容IE7以前的低版本IE浏览器: 父元素{ display:teble-cell; width:Npx; height:Npx; vertical-ali

iOS HTML 字符串中的图片 自适应大小

本文原文地址:http://www.cnblogs.com/qianLL/p/6095988.html 有时候 我们接收数据的时候  后台给的数据室一串HTML 的字符串  但是 我们要显示出来  这是 我们会发现文字可以自适应大小,但是有些图片并不能自适应大小 这是 我们就需要去修改img的CSS样式 但是我们添加一个style 对所有的img标签 进行控制  是可以  但是 如果出现这种<img style ="width = ;height= px" 这种的话 我们就没办法

html中图片自适应浏览器和屏幕,宽度高度自适应

1.(宽度自适应):在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-width,initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%. 2.(字体自适应):字体