图片还是不能随屏幕的变化而变化？

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

#box{

width:80%;

margin:0 auto;

background: #ccc;

text-align:center;

}

#box>img{

display: inline-block;

padding:1.5%;

width:21%;

height:200px;

}

/*此处写代码*/

#box{

display:flex;

flex-wrap:wrap;

}

@media screen and (min-width:960px){

img{

width:100%;

}

@media screen and (min-width:780px)and{max-width:961px}{

img{

width:100%;

}

@media screen and (min-width:440px)and{max-width:801px}{

img{

width:100%;

}

@media screen and{max-width:441px}{

img{

width:100%;

}

</style>

</head>

<body>

</div>

</body>

</html>

努力1下一站 2019-04-21

源自：移动Web开发入门 3-24 编程练习

收起

2回答

好帮手慕星星 2019-04-21 15:56:04

按照正常来说，两行三列图片显示，每个图片左右两侧的padding值是1.5%，那么padding值加起来就是1.5*6=9%，剩余空间是91%，那么一张图片的宽度就是91/3=30.333，但是由于每张图片是内联元素，默认存在间隙的，可以理解为有文字特性，所以宽度设置小一些。在box中设置font-size:0；就可以清除间隙：

自己可以测试下。

收起回答

好帮手慕星星 2019-04-21 14:03:35

同学你好，代码中的问题：

1、宽度条件要用()表示，不是{}哦：

2、不需要使用flex布局，使用媒体查询控制图片的宽度即可。

3、图片的选择器要使用之前的#box>img，否则只使用img是覆盖不了之前设置的样式的，选择器权重不够。

可以参考下面修改的：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <meta name=""> -->
    <style>
    #box {
        width: 80%;
        margin: 0 auto;
        background: #ccc;
        text-align: center;
    }

    #box>img {
        display: inline-block;
        padding: 1.5%;
        width: 21%;
        height: 200px;
    }

    /*此处写代码*/
    /*
    #box {

        display: flex;

        flex-wrap: wrap;

    }*/

    @media screen and (min-width:960px) {
        #box>img {
            width: 21%;
        }
    }

    @media screen and (min-width:780px) and (max-width: 961px) {
        #box>img {
            width: 29%;
        }

    }

    @media screen and (min-width:440px) and (max-width: 780px) {
        #box>img {
            width: 46%;
        }
    }

    @media screen and (max-width: 440px) {
        #box>img {
            width: 100%;
        }
    }
    </style>
</head>

<body>
    <div id="box">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e49100014e5010601059.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e53b00012e6d09940789.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e53c0001d04e09940732.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e49100014e5010601059.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e53b00012e6d09940789.jpg" alt="">
        <img src="http://img1.sycdn.imooc.com//climg/5a45e53c0001d04e09940732.jpg" alt="">

</div>
</body>

</html>

祝学习愉快！

收起回答