Question

1为什么我缩小浏览器窗口时无法缩小宽度图像？

2为什么图像不在中心红色div？

我可以缩小图像（浏览器镶边）。

enter image description here

在我的site我无法缩小图像（浏览器镶边）。

enter image description here

代码：

<!DOCTYPE html>
<html>
<head>

  <style type='text/css'>
    #Blue
{
position:relative;
top:0px;
left:0px;
margin:0px auto;
height: auto;
width: 97%;
z-index: 10;
background:azure;
    border:5px solid blue;

}
#Red{
    position:relative;
    margin:auto;
    width:300px;
    height:100%;
    border:5px solid red;
    padding:0;
    margin-bottom:5px;
    bottom:0;

}

#Menu{
    width:100px;
    height:20px;
    background:yellow;
    margin:auto;
    display:none;
}

img {
    top:0px;      
    position: relative;
    margin:auto;
    width: 200px; 
    height: 200px;

}
#green{}

@media (max-width: 200px) {

#Menu{
        display:inline;
        margin:1px;
        text-align:center;    
        position:static;
        width:100%;;
    }
#Menu, #Red{
    width:auto!important;
    height:auto!important;
}

 #Red, img{
    position:static;
    max-width:100%;
}
}    

  </style>
</head>
<body>
  <div id="Blue">
<div id="Menu">Menu</div>   
    <div id="Red">

        <div id="Green">
            <picture alt="description of image">

  <img src="http://www.candcsavannahs.com/images/queenpawnee2.jpg" alt="description of image">

</picture>
        </div>
    </div>
</div>



</body>


</html>

Answer 1

什么是Picture标签？它不是一个标准的html标签，删除它似乎使它工作。

        <div id="Green">
            <!-- <picture alt="description of image"> -->

  <img src="http://www.candcsavannahs.com/images/queenpawnee2.jpg" alt="description of image">

<!--    </picture> -->
        </div>

为什么在缩小浏览器窗口时无法缩小宽度图像？

1 个答案: