不规格图片等比例展示---上下/左右留白
等比例留白.png
屏幕快照 2017-12-13 上午11.39.41.png
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试</title>
<style>
.center-img {
width:300px;
height:225px;
overflow:hidden;
border: 1px solid red;
margin-top: 200px;
margin-left: 300px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var img= document.getElementById('img');
img.src='thu-1.jpg';
img.onload = function(){
//获取图片的宽高
var width = document.getElementById('img').offsetWidth;
var height = document.getElementById('img').offsetHeight;
//获取显示div的宽高
var _width = document.getElementById('div').offsetWidth;
var _height = document.getElementById('div').offsetHeight;
//宽度比例
var width_scale = _width / width;
// alert(width_scale);
//高度比例
var height_scale = _height / height;
// alert(height_scale);
//判断宽度比例和高度比例，取最大比例缩放图片
var scale = 1;
// if(width_scale<1 && height_scale < 1){
scale = (width_scale>height_scale) ? height_scale : width_scale;
// }else {
// scale = (width_scale<height_scale) ? height_scale : width_scale;
// }
var img = document.getElementById('img');
var old_width = img.width;
var old_height = img.height;
img.width = old_width * scale;
img.height = old_height * scale;
var src = img.getAttribute('src');
img.setAttribute('src',src);
img.onload = function(){
this.style.marginTop=(_height-this.height)/2.0;
this.style.marginLeft=(_width-this.width)/2.0;
}
}
}
</script>
</head>
<body>
<div id="div" class="center-img">
<img id = "img"/>
</div>
</body>
</html>
第二种:
纯css实现未知尺寸图片在DIV中垂直水平居中
屏幕快照 2017-12-13 下午3.16.22.png
屏幕快照 2017-12-13 下午3.16.37.png
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试</title>
<style>
.center-img {
width:400px;
height:300px;
position: relative;
overflow:hidden;
/display: table-cell;/
border: 1px solid red;
margin-top: 200px;
margin-left: 300px;
}
img {
position: absolute;
margin: auto;
top: -9999px;
left: -9999px;
right: -9999px;
bottom: -9999px;
}
</style>
</head>
<body>
<div id="div" class="center-img">
<img id = "img" src="别墅.jpg" />
</div>
</body>
</html>
