已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形。

javascript css

阅读 2k

2 个回答

得票最新

攻城狮Lee丶

2.8k3833

发布于
2019-02-20

✓ 已被采纳

css方法
object-fit:cover;

js方法


<!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>

草从

1.1k129

发布于
2019-02-20

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形。

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？