小编典典

带有CSS的响应式图像

css

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

我正在开发一个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实现此目标的方法吗?


阅读 355

收藏
2020-05-16

共1个答案

小编典典

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

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

2020-05-16