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

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

<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>

 

转载于:https://www.cnblogs.com/zhixi/p/4917961.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/374259.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python2 print_Python2和Python3中print的不同点

在Python2和Python3中都提供print()方法来打印信息,但两个版本间的print稍微有差异 主要体现在以下几个方面&#xff1a; 1.python3中print是一个内置函数&#xff0c;有多个参数&#xff0c;而python2中print是一个语法结构&#xff1b; 2.Python2打印时可以不加括号&#xff…

java 与 c#的 中 字符串比较“==”与“equals”的差异

.net中&#xff0c;其字符串特有的驻留机制&#xff0c;保证了在同一进程中&#xff0c;相同字符序列的字符串&#xff0c;只有一个实例&#xff0c;这样能避免相同内容的字符串重复实例化&#xff0c;以减少性能开销。 先来回顾一下c#中的代码&#xff1a; public static void…

visual studio 2019 未能在命名空间“System.IO.Ports”中找到类型名“SerialPort”

在vs2019以前的版本&#xff0c;只要using System.IO.Ports就可以用SerialPort。 这里需要自己手动添加相关引用。 工具–>Nuget包管理器&#xff08;N&#xff09;–>管理解决方案的Nuget程序包&#xff08;N&#xff09; –>浏览&#xff0c;左边搜索SerialPort 右…

单一登录云:SAML和OpenId

当访问不同组织拥有的不同应用程序时&#xff0c;每次从一个应用程序转到另一个应用程序时都必须进行身份验证。 不仅浪费时间&#xff0c;而且您还必须记住多个经常丢失的密码。 单一登录是一次认证的能力&#xff0c;并且能够使用已认证的身份在应用程序之间无缝切换。 在In…

python开发环境功能介绍_第一模块 第3章 Python介绍与环境配置

python入门(全为重点) 1. 编程语言介绍 编程语言分类、总结 2. python介绍 3. 解释器多版本共存 4. 运行python程序的两种方式 5. 一个python程序运行的三个步骤&#xff08;******&#xff09; 6. 注释 7. IED集成开发环境 3.1 编程语言分类之低级语言 这里的高级/低级指的是离…

如何判断微信内置浏览器(JS PHP)

进行微信公众账号开发的时候&#xff0c;其中很大一块是微站点的开发&#xff0c;我们需要知道当前的浏览器是微信内置的浏览器&#xff0c;那么如何判断呢&#xff1f; 微信内置浏览器的 User Agent Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536…

用WPF做关于MEF 简单学习记录

写在前面&#xff1a;下面学习所得多是从自http://www.cnblogs.com/comsokey/p/MEF1.html和http://www.cnblogs.com/yunfeifei/p/3922668.html两位大神的文章里学到的&#xff0c;特别鸣谢&#xff01;整理下是更大一方面是对自己知识的梳理&#xff0c;用词用句不够准确&#…

Log4j,Stat4j,SMTPAppender集成–汇总错误日志以发送太多电子邮件

我们的开发团队希望在生产系统出现问题时尽快得到通知&#xff0c;这是一个每天为成千上万的客户提供服务的关键Java Web应用程序。 这个想法是让它在出现太多错误时向我们发送电子邮件&#xff0c;这些错误通常表明数据库&#xff0c;外部Web服务存在问题&#xff0c;或者应用…

C排序算法:(一)直接排序

最简单的排序方法。 如果从大到小排序&#xff0c;那么从[0]元素开始&#xff0c;和后面的元素进行对比&#xff0c;如果后面元素大&#xff0c;则和[0]元素交换。 核心思想&#xff1a;选定基准元素&#xff0c;和其他元素对比。 #include <stdio.h>unsigned char buff…

数据库抽象类PDOStatement对象使用

1.预处理语句中使用占位符,分为 索引方式 和 关联方式 a.索引方式&#xff1a; $pdonew PDO($dns,$username,$password,$options); $sqlselect * from tests where username?,password?; $stmt$pdo->prepare($sql); $stmt->execute(array($username,$password)); b.关联…

c语言 链表_C语言编程第22讲——单向有序链表的C语言实现

1、单向有序链表的含义单向有序链表可以解析为四个名词&#xff1a;表&#xff1a;一组元素&#xff1b;链表&#xff1a;表中的元素不是从前往后一个挨着一个&#xff0c;而是通过一个元素才能找到另一个元素&#xff1b;单向&#xff1a;表中的元素只能从前往后访问&#xff…

Spring 3.1和Hibernate的持久层

1.概述 本文将展示如何使用Spring和Hibernate实现DAO 。 有关核心的Hibernate配置&#xff0c;请参阅有关带​​有Spring的Hibernate 3和Hibernate 4的文章。 2.没有更多的春天模板 从Spring 3.0和Hibernate 3.0.1开始&#xff0c; 不再需要Spring HibernateTemplate来管理Hib…

C排序算法:(二)冒泡排序

冒泡排序就是从左至右比较相邻的两个数值大小&#xff0c;如果右侧的数值较小&#xff0c;则交换两个数值的位置&#xff0c;较大的数值就会像泡泡一样一路向右漂浮。 #include <stdio.h>//small to big void Bubble_Sort(unsigned char *input_data, unsigned int inpu…

C语言之猜数游戏

#include<stdio.h>#include<stdlib.h>#include<time.h>int main(){ srand(time(0)); int count0,thought; int numrand()%1001; printf("%d\n",num); do { printf("请猜这个数在1-100之间\n"); scanf("%d",&thought); cou…

pythonturtle画点的指令_简述python的turtle绘画命令及解释

一 基础认识 turtle库是python的标准库之一&#xff0c;它是一个直观有趣的图形绘制数据库&#xff0c;turtle(海龟&#xff09;图形绘制的概念诞生1969年。它的应用十分广&#xff0c;而且使用简单&#xff0c;只要在编写python程序时写上import turtle即可。 1.绘图窗口设置命…

算法—振兴中华(C语言版)

/* 标题: 振兴中华小明参加了学校的趣味运动会&#xff0c;其中的一个项目是&#xff1a;跳格子。地上画着一些格子&#xff0c;每个格子里写一个字&#xff0c;如下所示&#xff1a;从我做起振我做起振兴做起振兴中起振兴中华比赛时&#xff0c;先站在左上角的写着“从”字的格…

OpenGL ES一些函数详解(一)

glLoadIdentity和glMultMatrix glLoadIdentity的作用是将当前模型视图矩阵转换为单位矩阵&#xff08;行数和列数相同的矩阵&#xff0c;并且矩阵的左上角至右下角的连线上的元素都为1&#xff0c;其它元素都为0&#xff09;&#xff0c;这样可以方便矩阵的乘法运算。 glMultMa…

忽略Java中的自签名证书

我在职业生涯中遇到过几次问题&#xff0c;就是我们有时希望允许自签名证书用于开发或测试目的。 Google的快速搜索显示了多年来无数Java开发人员遇到的麻烦。 根据确切的证书问题&#xff0c;您可能会收到类似以下内容之一的错误&#xff0c;尽管我几乎肯定有其他表现形式&…

C排序算法:(三)插入排序

像打扑克牌一样&#xff0c;每次摸一张牌&#xff0c;把牌插入正确位置。 #include <stdio.h>void Insert_Sort_Small_To_Big(unsigned char* input_data, unsigned int input_length) {int i 0, j 0;unsigned char temp 0;for (i 1; i < input_length; i){temp …

sqlserver中自定义函数+存储过程实现批量删除

由于项目的需要&#xff0c;很多模块都要实现批量删除的功能。为了方便模块的调用&#xff0c;把批量删除方法写成自定义函数。直接上代码。 自定义函数&#xff1a; ALTER FUNCTION [dbo].[func_SplitById] (str varchar(50),split varchar(10))--传过来的id字符串 --分割的标…