47

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

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

4

6 回答 6

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

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

于 2012-07-31T11:55:19.193 回答
14

也用于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;
}
于 2012-07-31T08:51:26.433 回答
0

首先用 php 检查图像，如果它很小，那么 logo 的标准尺寸为它提供任何其他 css 类并且不要改变它的大小

我认为您必须在两者之间编写脚本

于 2012-07-31T08:57:54.907 回答
0

嗯响应很简单

  • 首先创建一个名为 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 盲目，他们首先给出默认样式是有逻辑的原因的。

于 2014-01-23T08:15:15.987 回答
0

the best way i found was to set the image you want to view responsively as a background image and sent a css property for the div as cover.

background-image : url('YOUR URL');
background-size : cover
于 2017-04-09T19:23:12.570 回答
-1

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

image {
    max-width:100%;
    height: auto;
    display:block;
}
于 2016-08-02T21:36:10.553 回答