您的位置：首页 > Web前端 > CSS

css已知盒子大小，盒子中的图片铺满但不变形

2019-02-20 10:33 134 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhuoganliwanjin/article/details/87779068

css方法

object-fit:cover;

js方法

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.div{width:400px;height: 400px;border:1px solid #ddd; overflow: hidden;}
img{width: 100%;}
</style>
</head>
<body>
<div class="div" id="div">
<img src="img/test.jpg" id="ele" />
</div>
</body>
<script>
var ele = document.getElementById("ele");
var div = document.getElementById("div");
ele.onload = function(){
if(ele.naturalHeight < div.offsetHeight){
ele.style.width = "auto";
ele.style.height = "100%";
}
}

</script>
</html>

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航