0

1 ブラウザ ウィンドウを縮小すると、幅の画像を縮小できないのはなぜですか?

2 画像が中央の赤い div にないのはなぜですか?

jsFiddleでは、画像を縮小できます (ブラウザのクロム)。

ここに画像の説明を入力

私のサイトでは、画像を縮小できません（ブラウザのクロム）。

ここに画像の説明を入力

コード：

<!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>
4

1 に答える 1

2

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>
于 2012-10-11T21:02:51.597 に答える