为什么用flex设置了比例后的背景图在100%下仍然占据全屏

Question

为什么用flex设置了比例后的背景图在100%下仍然占据全屏

Vincent

491127

发布于
2018-04-23

代码如下所示，我已经按比例设置了左边的比为2，右边为1，但是在图片宽度设置为百分百的情况下图片仍然占整个屏宽，如图二所示。而且代码我是完全按照模板代码写的，不知道为什么模板的就能正常显示

期望效果图

css html

html5

阅读 4.6k

1 个回答

得票最新

羊羊羊

1.7k1415

发布于
2018-04-23

✓ 已被采纳

我这边照着你的敲了一遍，是可以的(除了图片路径换成我自己的了

<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
</head>
<style type="text/css">
    .part6 {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        height: 41vw;
    }
    .part6-left {
        background: url('图片/2.png') no-repeat;
        background-size: 100%;
        -webkit-flex: 2;
        -ms-flex: 2;
        flex: 2;
    }
    .part6-right {
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: flex;
    }

</style>
<body>
<div class="part6">
    <div class="part6-left">
    
    </div>
    <div class="part6-right">
    
    </div>
</div>

</body>
</html>

撰写回答

你尚未登录，登录后可以

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

推荐问题

相似问题

找不到问题？创建新问题

为什么用flex设置了比例后的背景图在100%下仍然占据全屏

你尚未登录，登录后可以

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

快开发完的Vue3项目要做SEO该如何处理？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？