版权声明:欢迎转载,欢迎技术交流,转载声明出处即可@@ https://blog.csdn.net/qq_36389107/article/details/79239883
1.固定宽度或高度
这是一种比较常见的方法都烂大街了,先直接上代码吧。
<style>
.box-content{
width:96%;
margin:2%;
display: flex;
flex-wrap: wrap;
}
.box{
width:23%;
margin:1%;
}
.box img{
width:100%;
}
</style>
<div class="box-content">
<div class="box">
<img src="http://images.hanjiapz.com/upload/20171114/ee91f4ee560845e4bbb640dc8d1bd5ae.jpg">
</div>
<div class="box">
<img src="http://images.hanjiapz.com/upload/20171114/ee91f4ee560845e4bbb640dc8d1bd5ae.jpg">
</div>
</div>
如上所示,这样下来的图片宽度被固定了,跟.box盒子容器一样宽。高度会随着盒子的比例进行压缩或放大。
2.利用背景图图片居中显示不拉伸变形
还是直接上代码吧。
<style>
.box-content{
margin:20px;
display: flex;
flex-wrap: wrap;
}
.box-img{
border: 1px solid #f7ecb5;
background-position: center center;
background-color: #1c2d3f;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.box-item-1{
width: 45%;
margin: 2.5%;
height: 200px;
}
</style>
<div class="box-content">
<div class="box-img box-item-1" style="backgound-img:url(http://images.hanjiapz.com/upload/20171114/ee91f4ee560845e4bbb640dc8d1bd5ae.jpg)"></div>
</div>
这个其实是利用了背景图居中的方法进行取巧,其实并不是img图片。但是这样确实解决了不少问题。
3.脚本控制图片计算
<style>
.box-content{
margin:20px;
display: flex;
flex-wrap: wrap;
}
.pos-r{
position:relative;
}
.box{
width:23%;
margin:1%;
height:200px;
}
</style>
<div class="box-content">
<div class="box pos-r">
<img class="handle-img" handle-src="http://images.hanjiapz.com/upload/20171114/ee91f4ee560845e4bbb640dc8d1bd5ae.jpg">
</div>
</div>
<script>
/**
* 多个图片显示处理
* @param lazyImgList
*/
function handleImg(lazyImgList) {
for(var i=0;i<lazyImgList.length;i++){
loadImages(lazyImgList[i]);
}
}
/**
* 单个图片处理
* @param img
*/
function loadImages(img){
var box = img.parentNode;
img.onload = function(){
var height=img.height;
var width=img.width;
var boxWidth=box.offsetWidth;
var boxHeight=box.offsetHeight;
img.style.position = "absolute";
if (height >width) {
var objHeight = (height / width) * boxWidth;
if(objHeight-boxHeight>0){
img.style.width = boxWidth.toString() + "px";
img.style.height = objHeight.toString() + "px";
var top = -(objHeight - boxHeight) / 2;
img.style.top = top.toString() + "px";
img.style.left = "0px";
}else {
img.style.height = boxHeight.toString() + "px";
var objWidth=(boxHeight/ height)*width;
img.style.width =objWidth + "px";
var left = -(objWidth - boxWidth) / 2;
img.style.left = left.toString() + "px";
img.style.top = "0px";
}
} else {
var objWidth =(width / height) *boxHeight;
if(objWidth-boxWidth>0){
img.style.height = boxHeight.toString() + "px";
img.style.width = objWidth.toString() + "px";
var left = -(objWidth - box.offsetWidth) / 2;
img.style.left = left.toString() + "px";
img.style.top = "0px";
}else {
img.style.width = boxWidth.toString() + "px";
var objHeight=(boxWidth/ width)*height;
img.style.height = objHeight.toString() + "px";
var top = -(objHeight - boxHeight) / 2;
img.style.top = top.toString() + "px";
img.style.left = "0px";
}
}
img.removeAttribute("handle-src");
img.className=img.className.replace('handle-img','handed-img');
};
img.src=img.getAttribute("handle-src");
}
var list=document.getElementsByClassName("hand-img");
handleImg(list);
</script>
经过脚本处理后图片也居中显示了。图片超出的部分进行了相应的隐藏。
4.css3新属性object-fit
这个是css3的新的属性类似于2的background-size属性。一般情况下与单独使用时,默认图片居中显示。也可以配合object-position使用。
<style>
.content{
margin:20px;
display: flex;
flex-wrap: wrap;
}
.picture-box{
height:200px;
width:23%;
margin:1%;
}
.object-img{
width:100%;
heght:100%;
object-fit:cover;
object-position:center;
}
</style>
<div class="content">
<div class="picture-box">
<img class="object-img" src="http://images.hanjiapz.com/upload/20171114/ee91f4ee560845e4bbb640dc8d1bd5ae.jpg">
</div>
</div>