老师，请检查下我的代码

Document

</div>

慕粉1326050 2022-08-30

源自：浮动与定位 3-12 编程练习

收起

1回答

imooc_慕慕 2022-08-31 09:44:42

同学你好，同学没有复制代码成功，无法查看，同学可以再重新粘贴一下，老师再帮你检查，祝学习愉快~

收起回答

提问者慕粉1326050 #1

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .primer img{  
            width: auto;
            height: auto;                      
        }
        .primer .web{
            position: fixed;
            top: 50%;
            left: 0;
        }
        .primer .java{
            position: fixed;
            top:50%;
            right: 0;
        }
        
    </style>
</head>
 
<body>
    <div>
        <div class="primer">
            <img src="http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png" alt="">
            <div class="web">
                <img src="http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png" alt="">
            </div>
            <div class="java">
                <img src="http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png" alt="">
            </div>
        </div>
    
    </div>
</body>
 
</html>

2022-08-31 11:20:04

imooc_慕慕回复提问者慕粉1326050 #2

同学你好，
1、左右图片没有上下垂直居中显示修改参考如下：
通过小技巧我们可以在控制台查看到图片的大小
将相同的代码写在一起，减少代码量

2、图片默认会按照原始大小显示。电脑分辨率不同，浏览器页面的宽度也就不同。为了让作为背景的图片，能在任何屏幕下，宽度方向都全屏显示（不按照原始大小显示），建议给图片设置width属性：
祝学习愉快~

2022-08-31 11:40:17