Question

前导码：

我正在使用一个有点敏感的主题（骨架）。它将布局更改为单个列，用于小屏幕尺寸，

我的问题是：

我的标题图片（我使用管理面板中的主题选项插入）在调整屏幕大小时不会缩放。它一直保持在940x150。当在移动设备上查看时，这会导致一个完整大小的标题，其内容位于左侧的单个列中，因此我留下了所有类型的空白。

我想：使图像按屏幕宽度缩小

OR

将标题图片替换为适合较小屏幕尺寸的图片。

选项2的问题并非所有设备都具有相同的屏幕宽度，因此它仍然需要可扩展到某一点。

理想情况：

当高于下述宽度时，图像将缩放以适应700-something（ipad landscape）和940标准之间的屏幕。

当低于某个屏幕宽度（比如下面的平板电脑/ ipad尺寸，因此700-something max-width）时，图像会换成较小的一个，然后在300到700之间向上或向下扩展（下面） ipad尺寸）。

以这种方式，图像总是适合渲染网站的大小。

这个特定图像的问题是中间的空白量（空白空间）。在一定的宽度以下，我会认为图像的元素会因为它们之间的空间太大而变得混乱和混乱。

网站：

porthuronairportshuttle.com

Answer 1

将此添加到您的css：

img {
height: auto;
max-width: 100%;
}

Answer 2

我明白了。这实际上是删除我使用主题选项上传的标题并使用wp核心功能上传它的问题。然后我移动了header.php中的导航栏，经过一些带边距和填充的调整 - 噗！[/ p>