一,图片等比缩放
效果:
html
<div class="row" id="imgbox">
<img id="image" src="">
</div>
<div class="row">
<div id="showimg">查看原图</div>
</div>
css(对img外层div尺寸限制,img长宽自适应)
#imgbox{
max-width:100%;
max-height: 400px;
text-align: center;
}
#image{
width: auto;/*图片长宽自适应*/
height: auto;
max-width:100%;
max-height: 400px;
}
二,查看原图
添加一个展示大图的div:(点击大图关闭大图)
<div id="bigimg">
<img src="" onclick="closeImg()">
</div>
css(设置该div绝对定位在屏幕中间)
#bigimg{
position: fixed;
top:50%;
left:50%;
display: none;
z-index: 20;
}
js
//查看大图
$('#showimg').click(function(){
var image = new Image(); //创建一个image对象
var path=$("#image").attr("src");
image.src=path; //新创建的image添加src
var width = image.width; // 获取原始图片的宽
var hight = image.height; // 获取原始图片高
$("#bigimg img").attr('src',path);
$("#bigimg").css({"margin-top":-hight/2,"margin-left":-width/2});
$("#bigimg").show();
});
//关闭大图
function closeImg(){
$("#bigImg img").attr('src',"");
$("#bigimg").hide();
}
参考:https://blog.csdn.net/qq_30449567/article/details/80548489