响应式绝对图像缩放

Question

为什么调整大小不起作用？ (#mainContainer img)

#mainContainer
{
    width: 100%;
    color: white;
    text-align: center;
    position: absolute;
    bottom: 100px;
}

#mainContainer img
{
    margin-left: 20px;
    margin-right: 20px;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

我得到了这个：http://idlecoin.tk/（尝试调整窗口大小（浏览器）） 我尝试了一切（也许）..这没有用。再一次..再一次..再一次..

.. 我试着让这个网站响应。

Answer 1

这是因为您的图片应用了内联样式。

改变这个

<img src="img/xpmx.png" width="250px" height="250px">

到这里

<img src="img/xpmx.png">

并使用：

#mainContainer img{
  width:100%;
  max-width:250px;
}

内联样式总是优先于任何其他 css。内联样式通常由 javascript 添加。