`

未知尺寸图片的居中 css解决方法

CSSHTMLWeb 
阅读更多

对未知尺寸图片的居中，是经常遇到的一个问题。不过，这里首先声明的是，未知尺寸的图片是指在程序控制了一定大小限制下，尺寸小于当前容器的图片 。

目前较为通用的解决方法是利用display和fontSize的hack，尽量减少了无语义的标签。

上代码：

<html>
<head>
<title>impng </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html,body,div,img{margin:0;padding:0;font-size:12px;}
.pic_wrap{width:150px;height:150px;border:1px solid red;}
.pic_wrap{display:table-cell;vertical-align:middle;+display:block;+font-size:139px;text-align: center;}/* fontSize=height\1.14 */
.pic_wrap img{border:1px solid #999;}
</style>
</head>
<body>
<div class="pic_wrap">
	<img src="http://10.0.3.51:8080/portal-html/images/ipbg.gif" alt="图片" />
</div>
</body>
</html>

 ps:此处除了用到display的hack，主要用到了font-size。关于其值的设置，计算方法是当前容器的高度除以1.14后取整，但根据实际 情况，需要在此基础上进行测量，更改为一个恰当的修正值即可。(不要问为什么是这个数，暂时没人解释得清)外面的div容器如果说是多余的无语义标签的 话，你可以根据需要替换成a标签：一般的图片都带有链接的。否则，你要再挑剔的话，用js生成外面的这个标签吧。

[转自 :http://www.impng.com/web-dev/unhnow-size-images-middle-by-css.html ]

分享到：
| JavaScript十个实用小技巧
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS解决未知高度的DIV垂直居中

    CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中

    css设置未知尺寸图片的水平和垂直居中

    NULL 博文链接：https://xdwangiflytek.iteye.com/blog/1343445

    css 未知高度元素绝对居中

    css 未知高度元素绝对居中终极完美解决方案

    未知大小的图片自适应水平垂直居中源码纯CSS

    未知大小的图片 垂直居中，水平居中，纯CSS。兼容主流浏览器。

    css图片垂直居中 css中如何实现图片垂直居中

    在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的...

    CSS 解决未知高度垂直居中实现代码

    尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。

    未知大小的图片在已知容器中的垂直居中和水平居中

    δ知大小的图片在已知容器中的垂直居中和水平居中，一直是困扰大家的问题，今天西西带给大家一个简单的实现办法，详见css文件，此代码兼容各个浏览器，源码库推荐下载！

    div垂直居中的N种方法 单行/多行文字(未知高度/固定高度).docx

    div垂直居中的N种方法 单行/多行文字(未知高度/固定高度) 说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊！所以在...

    CSS 实现未知内容高度的垂直水平居中(改良版)

    垂直居中在IE浏览器下的实现比较难实现，而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良，兼容FF，IE6，IE7，Opera…如发现问题有劳回复评论！ ...

    div+css有实例,易学易懂

    6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的...

    CSS设置未知大小图片在已知大小容器水平垂直居中

    复制代码代码如下: &lt;!...未知大小图片在已知大小容器水平/垂直居中&lt;/title&gt; &lt;style type=”text/css”&gt; .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; ve

    div图片垂直居中 如何使div中图片垂直居中

    “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。 题目的难点在于两...

    css实现的让图片垂直居中的方法

    图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。

    让图片垂直居中的使用方法

    “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。 题目的难点在于两...

    CSS 垂直水平居中的5种最佳解决方案

    当然也有更多的居中处理方法 但我觉得只有这5种方法是最完善的解决方案 flex 居中 优点：可对未知高度进行居中处理 &lt;style&gt; .wrap{height: 100%;display: flex; justify-content: center; align-items: ...

    CSS解决未知高度的垂直水平居中自适应问题

    今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] &lt;style&gt; body { text-align:center} #info{ margin:0

Magicbox
Global site tag (gtag.js) - Google Analytics