使用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的帮助.

Answer 2

也用max-width在图像上.更改:

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

至...

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