一种用css实现图片在父框中等比缩放并垂直居中的办法

一个网页中往往会有很多图片,而网站的编辑上传图片时可能并不一定按照为父框设定的那个宽高来传,这样图片往往会将父框撑开或者被父框截断。一种比较好的解决的办法是这样的:

 

HTML代码结构:

 <div class="dimg"><i class="posI"></i><img width="125" height="160" alt="宝格丽全新珠宝腕表" src="http://img0.pclady.com.cn/pclady/watch/news/1411/29.jpg"></div>

 

CSS:

    /*父框样式*/.dimg {width: 125px;height: 160px;text-align: center;}/*辅助元素样式*/i.posI {display: inline-block;height: 100%;vertical-align: middle;width: 0;}/*图片样式*/.dimg img {vertical-align: middle;max-width: 125px;max-height: 160px;_width: expression(document.body.clientWidth > 125 ? "125px" : "auto");_height: expression(this.scrollHeight > 160 ? "160px" : "auto");}

 

这个办法的缺点是需要增加一个无意义的辅助元素i,还要用到expression来为IE6模拟max-width和maxheight,只能视情况而用。

 

 

 

实现的效果如下:

 

当网站编辑放的是与父框宽高相等的图片时:

 

 

 

当网站编辑放的是缩小5倍的小图时:


 

转载于:https://www.cnblogs.com/macliu/p/4108190.html

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

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

相关文章

CLR VIA

标题 状态 内容 什么是CLR? 什么是托管模块&#xff1f; 托管模块由什么组成&#xff1f; 。net代码的执行过程 http://www.cnblogs.com/aaa6818162/p/4726581.html http://www.cnblogs.com/kingmoon/archive/2012/07/16/2594459.html 为了执行程序&#xff0c;首…

python ansys workbench联动_联合ANSYS WORKBENCH和经典界面进行后处理

WORKCENCH主要是为不大懂ANSYS命令和编程的工程师服务的&#xff0c;而经典界面则适用于初学者和研究人员。初学者和研究人员是完全不同的两个层次&#xff0c;为什么ANSYS经典界面却同时适合二者呢&#xff1f;实际上&#xff0c;学好ANSYS&#xff0c;关键并非是操作界面&…

jQuery表格排序总成-tablesorter

一个、进口单证<script type"text/javascript" src"js/jquery.js"></script> <script type"text/javascript" src"js/jquery.tablesorter.js"></script> <!-- 引入下面样式则表头出现排序图标。同一时候…

5渲染判断_云渲染怎么收费,5大云渲染平台实测,您选对了吗?

3DMAX云渲染平台都怎么收费&#xff1f;5大云渲染平台测试后才知道差距这么大&#xff0c;您用对了吗&#xff1f;本次共计测试了3个镜头&#xff0c;为了让大家很直观地感受各个平台渲染时间和费用上的对比&#xff0c;我整理了个表格&#xff0c;供大家自行参考和判断。若有疑…

hadoop1常见配置含义

参数 取值 备注 fs.default.nameNameNode 的URI。hdfs://主机名/dfs.hosts/dfs.hosts.exclude许可/拒绝DataNode列表。如有必要&#xff0c;用这个文件控制许可的datanode列表。dfs.replication默认&#…

Android工程的编译过程

现在很多人想对Android工程的编译和打包进行自动化&#xff0c;比如建立每日构建系统、自动生成发布文件等等。这些都需要我们对Android工程的编译和打包有一个深入的理解&#xff0c;至少要知道它的每一步都做了什么&#xff0c;需要什么环境和工具&#xff0c;输入和输出是什…

activiti 工作流设置并行审批_activity、jbpm5、snakerflow常用工作流审批流对比

# 审批流调研背景由于目前产品研发组支持的产品项目越来越多&#xff0c; 同时几乎每个项目都会有导出审批&#xff0c;流程流转等需求&#xff0c;本着提高开发效率和组件化的目的&#xff0c;调研和开发通用的工作流组件&#xff0c;为后面的项目和新的需求提供快速支持。主要…

java 后台开发关键词解释

bean类&#xff1a;是一些实体类&#xff0c;包括viewbean,databean等等。action类&#xff1a;可作为接收显示层的数据&#xff0c;连接显示层和业务逻辑实现层的控制层。model类&#xff1a;MVC中model层就是到层。在java中无特殊含义就是模块。util类&#xff1a;工具类dao:…

docker mysql关掉后启动_Docker启动mysql的坑2

正确启动mysql&#xff1a;docker run -p 3306:3306 --name mysql02 -e MYSQL_ROOT_PASSWORD123456 -d mysql此时虽然启动成功。但是用客户端链接的时候报错连接Docker启动的mysql出现&#xff1a;ERROR 2059 (HY000): Authentication plugin caching_sha2_password cannot be …

Servlet基础知识(二)——web.xml文件的作用

http://www.cnblogs.com/yqskj/articles/2233061.html 转载于:https://www.cnblogs.com/wangerxiansheng/p/4113607.html

Spring web应用最大的败笔

第一篇 介绍下IOC DI Spring主要是业务层框架&#xff0c;现在已经发展成为一个完整JavaEE开发框架&#xff0c;它的主要特点是IoC DI和AOP等概念的融合&#xff0c;强项在面向切面AOP。推出之初因为Ioc/AOP等新设计理念值得框架设计者学习&#xff0c;现在已经成为Java世界主流…

mysql备份的后缀名_mysql备份数据库后缀名

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

如何专注

专注&#xff0c;据说是在这个时代能成功的基础。 看看自己这些分类、专注得了么&#xff1f; 转载于:https://www.cnblogs.com/x3d/p/4117443.html

mysql多主单向环形_mysql多主单向--gt;环形同步_MySQL

bitsCN.com原理&#xff1a;MySQL的Replication是一种多个MySQL的数据库做主从同步的方案&#xff0c;特点是异步&#xff0c;广泛用在各种对MySQL有更高性能&#xff0c;更高可靠性要求的场合。与之对应的另一个技术是同步的MySQL Cluster&#xff0c;但因为比较复杂&#xff…

***PHP 去除换行符

PHP在不同的系统中&#xff0c;换行是不同的 Linux&#xff1a;\n Windows&#xff1a;\r\n mac&#xff1a;\r 所以去除回车换行的方法: 1.使用php定义好的变量&#xff08;比较好的方法&#xff0c;推荐&#xff09; $str str_replace(PHP_EOL, , $str); 2.使用str_replace …

个人代码归档

http://pan.baidu.com/s/1D7Qii 密码&#xff1a;52n3转载于:https://www.cnblogs.com/vvonline/p/4121141.html

mysql current_timestamp 不自动更新_MySQL ON UPDATE CURRENT_TIMESTAMP不更新

我有一张桌子&#xff0c;看起来像这样&#xff1a;CREATE TABLE IF NOT EXISTS Hosts (id int(128) NOT NULL AUTO_INCREMENT,IP varchar(15) NOT NULL DEFAULT ,Port varchar(5) NOT NULL DEFAULT ,Password varchar(32) NOT NULL DEFAULT ,Username varchar(32) NOT NULL DE…

序列for循环语句

序列for循环语句 序列for循环语句允许重复遍历一组序列&#xff0c;而这组序列可以是任何可以重复遍历的序列&#xff0c;如由begin()和end()函数定义的STL序列。所有的标准容器都可用作这种序列&#xff0c;同时它也同样可以是std::string&#xff0c;初始化列表&#xff08;l…

mysql批量用trim限定_如何使用trim()并更新mysql中的所有行[复制]

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云数据库专家保驾护航&#xff0c;为用户…

C#中用WMI实现对驱动的查询

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Management; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;namespace WMI_驱动…