html图片自适应上下左右居中显示,图片大小自适应垂直居中的方法

偶尔会有这样的需求：在不知道图片宽和高情况下，需要让图片水平和垂直居中在某个容器下，而且，如果图片宽或者高超出容器，需要按照比例进行缩放，下面介绍几个常见的方式：

Javascript篇：

用JS的方式处理解决图片，思路就是预加载图片，然后取宽和高，计算位置，设置margin值，达到目的//计算图片居中位置的信息

functiongetImgSize(img,maxWidth,maxHeight){

varratio,

picW = img.width,

picH = img.height,

wRatio = maxWidth / picW,

hRatio = maxHeight / picH;

if(wRatio

ratio = Math.min(wRatio, hRatio);

picW = parseInt(picW * ratio);

picH = parseInt(picH * ratio);

}

sPaddingTop = (maxHeight - picH)/2;

return{

width : picW,

height : picH,

left : (maxWidth - picW)/2,

top : (maxHeight - picH)/2

}

//预加载图片

functionloadImg(url){

varimg =

html图片自适应上下左右居中显示,图片大小自适应垂直居中的方法相关推荐

在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示
在HTML5中, web app 以及手机客户端中,设置页面图片等比例居中显示接触前端时间不长,费了一些时间 img{display:block;max-width:100%;margin:auto ...
在PB中存图片入数据库及显示图片
在PB中存图片入数据库及显示图片摘自:http://www.xicc.cn/User0/109/Show.asp?/_articleid/549.html 1.选择图片 string ls_path ...
文章目录图片元素 img元素显示图片的两种写法： alt 属性与a元素连用 map元素和figure元素 figcaption 联用
文章目录图片元素 img元素显示图片的两种写法: alt 属性与a元素连用 map元素和figure元素 figcaption 联用图片元素 img元素 image 缩写,空元素 src属性 ...
img标签图片加载失败显示图片
img标签图片加载失败显示图片 onerror="οnerrοr=null;src='../../image/community/initialize_img.png'"
后端传验证码图片前端ajax怎么显示图片
后端传验证码图片前端,ajax怎么显示图片.验证码后端返给前端的是一张验证码的图片,如下: 再看浏览器response里的返回
div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
html背景和框如何居中显示图片,巧用background属性实现图片居中
想必大家都常被页面居中这个问题困扰吧,这里简单分享一下一个使用background样式属性来实现图片居中的新用法. 很久以前本骚年常用image.onload()这样的方式获取图片大小再进行调整,得到 ...
html怎么把设置按钮居中显示图片,html如何设置图片居中
在html中,使用margin属性设置图片居中,只需要给图片元素设置"margin:auto"样式即可.当margin属性值为"auto"时,浏览器会自动分配左 ...
android 按钮图片文字居中显示,[Android]Android 布局中如何让图片和文字居中显示？...
图片文字居中显示 **①组件TextView的属性 drawableTop ``` 块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完 ...

html图片自适应上下左右居中显示,图片大小自适应垂直居中的方法

html图片自适应上下左右居中显示,图片大小自适应垂直居中的方法相关推荐

最新文章

热门文章