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

我正在开发一个 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 实现这一点吗？