1 为什么我缩小浏览器窗口时无法缩小宽度图像？
2 为什么图像不在中心的红色 div 中？
在jsFiddle我可以缩小图像(浏览器 chrome)。
在我的 site我无法缩小图像(浏览器 chrome)。
代码:
<!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>
最佳答案
什么是图片标签？它不是标准的 html 标签，删除它似乎可以正常工作。
<div id="Green">
<!-- <picture alt="description of image"> -->
<img src="http://www.candcsavannahs.com/images/queenpawnee2.jpg" alt="description of image">
<!-- </picture> -->
</div>
关于html - 为什么缩小浏览器窗口后无法缩小宽度图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12848394/