带有CSS的响应式图像

Question

我发现调整图像大小以使其具有响应能力很棘手。

我正在开发一个php应用程序，以自动将网站转换为响应版本。我有点卡在图像上。

我已经成功将包装类添加到网站上的每个图像，并且可以很好地调整图像的大小。

我的问题在于图像自然小于窗口，例如徽标和图标。我不想调整这些大小。

我的代码当前会转换：

<img src="[src]" />

变成：

<div class="erb-image-wrapper">
    <img src="[src]" />
</div>

我在哪里使用以下CSS：

.erb-image-wrapper{
    max-width:90%;
    height:auto;
    position: relative;
    display:block;
    margin:0 auto;
}
.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

这将调整所有图像的大小，但是我只希望它调整超出页面宽度的图像的大小。我可以通过CSS实现此目标的方法吗？

Answer 1

.erb-image-wrapper img{
    max-width:100% !important;
    height:auto;
    display:block;
}

为我工作。
感谢MrMisterMan的协助。