我的图像在手机上显示时无响应

Question

1图像为500px平方。脱机时它是响应式的，而联机时则不是。

Link to the page

我的CSS

#container {

    margin: auto;

    position:absolute;

    top: 0; left: 0; bottom: 0; right: 0;

    max-width: 500px;

    max-height: 500px;


<div id="container">

<div style="text-align: center;"> <img alt="" 
style="width: 100%; height:100%;" src="img/index_4.png"></a></div></div>


@media screen and (min-width: 240px) and (max-width: 480px)

{
    #container {

    width: 90%;

    }
}

Answer 1

您需要具有固定的宽度，图片才能响应。

例如，如果您希望它始终填充其父元素宽度，但仍具有响应高度-将其设置为最小宽度100%并赋予其auto高度：

.picture {
    min-width: 100%;
    height: auto;
}