Wordpress - 如何调整移动设备的标题图像大小

Question

前言:

我使用的是一个反应灵敏的主题(骨架).它将布局更改为单个列,用于小屏幕尺寸,

我的问题是:

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

我想:使图像缩小屏幕宽度

要么

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

选项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%;
}