Question

我有一个图像作为标题，当屏幕较小时，例如当在iPhone或iPad上查看网站时，图像对于屏幕来说太大了。

图像覆盖导航并使网站无法使用。

我需要找到一种方法来使图像更改大小与屏幕大小相关。

我将如何这样做？

Answer 1

我假设您的容器的流体宽度为100％，并且可以很好地适应不同的屏幕尺寸。在这种情况下，您可以使用

img {
  max-width: 100%;
}

并且图像永远不会超过其父容器宽度或者来自响应式设计领域的一些更复杂的解决方案：

Adaptive Images

Picturefill

Answer 2

您可以在CSS中使用媒体查询。

在此示例中，当屏幕宽度小于1024px时，它将图像max-width设置为父元素的100％：

@media screen and (max-width: 1024px){
    img { max-width: 100% }
}

根据您想要进行设备的最大分辨率（横向模式下的iPad）选择宽度。

您可以在{}中设置其他任何内容。

但它仍会为用户下载完整图像。

有关媒体查询的更多信息here。