请老师看一下问题

来源:7-2 编程练习

TOUU_JP

2020-04-16 17:43:35

在控制对联块大小的时候 我不用img去控制 用包含他的div去控制 为什么达不到效果呢 代码如下 请老师看一下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>考试</title>
    <style type="text/css">
        .img1{
            width:1510px;
            margin-top: -8px;
        }
        .div0{
            position:relative;
        }
        .div1{
            width: 200px;
            height: 300px;
            position: fixed;
            top:250px;
            left: 70px;
        }
        .div2{
            width: 200px;
            height: 300px;
            position: fixed;
            top:250px;
            right: 260px;
        }
    //    .img2{
    //        width: 200px;
    //        height: 300px;
    //    }
    //    .img3{
    //        width: 200px;
    //        height: 300px;
    //    }
    </style>
</head>
<body>
    <div class="div0">
        <img class ="img1" src="http://climg.mukewang.com/59c9f7ce0001839219034033.png">
        <div class="div1">
            <img class = "img2" src="http://climg.mukewang.com/5a3383c70001f1b702240364.png">
        </div>
        <div class="div2">
            <img class = "img3" src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png">
        </div>
    </div>
</body>
</html>

写回答

1回答

好帮手慕小琪

2020-04-16

同学你好,同学是不是想问图片大小的问题?因为这里同学设置的div宽高,并不是图片的,图片多出的会溢出div,下面老师给出解决建议

 1. 可以在代码中加overflow:hidden;隐藏溢出部分,如下图:http://img.mukewang.com/climg/5e983e24092f700a11060385.jpg

页面对比效果:

使用overflow:hidden;前:

http://img.mukewang.com/climg/5e983e3d09693aac11070429.jpg

使用overflow:hidden;后:

http://img.mukewang.com/climg/5e983e48095087f411070429.jpg

2. 也可以给图片设置宽高100%,使其适应div的宽度,或直接设置图片的宽高也可以

http://img.mukewang.com/climg/5e983e520908f5f911070252.jpg

如果没有解决同学的问题,同学可以详细问一下具体的问题,老师会再进行解答。

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~

0

0 学习 · 9666 问题

查看课程