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;
}

Answer 3

首先使用php检查图像是否小，然后是徽标的标准尺寸提供任何其他css类，不要改变它的大小

我认为你必须在

之间编写脚本

Answer 4

响应很简单

首先创建一个名为cell的类，赋予它display:table-cell
然后@ max-width:700px执行{display:block; width:100%; clear:both}

这就不是绝对的div; divs需要100％然后max-width: - desired width -才能进行内部填充。一个真正的响应网站有少于9行的css通过任何东西你是在一个糟糕的事情和复杂的事情。

PS：reset.css样式表使得css blinds成为他们首先给出默认样式的逻辑原因。

Answer 5

我找到的最好的方法是将你想要反过来查看的图像设置为背景图像，并将div的css属性作为封面发送。

background-image : url('YOUR URL');
background-size : cover

Answer 6

使用max-width:100%;，height: auto;和display:block;，如下所示：

image {
    max-width:100%;
    height: auto;
    display:block;
}

使用CSS的响应式图像

6 个答案: