我发现调整图像大小以使其具有响应能力很棘手。
我正在开发一个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实现此目标的方法吗?
.erb-image-wrapper img{ max-width:100% !important; height:auto; display:block; }
为我工作。 感谢MrMisterMan的协助。