Question

我正在尝试构建一个网站，并希望添加类似于以下示例的标题图像：1。）http://bit.ly/1PP0Shr 2.）http://bit.ly/1PP1h3n

我当前的标题图片是1580 x 1050像素的照片。

我的问题：

1。）在桌面计算机上查看标题图像大小的可接受宽度和长度是多少？

我知道可能没有一个＆＃39;默认＆＃39;大小来统治它们所有，但我想在一些方面提供指导，我可以使用前进，甚至调整我在photoshop中的当前标题图像。

2.。）我应该使用什么CSS代码来使标题图像在所有屏幕上都有响应？

我的CSS样式表中是否有一些特定的背景属性？我甚至已经简要地阅读了有关媒体查询的内容，但目前还不了解如何使用它们。

谢谢。

Answer 1

你是对的，没有＆＃39;默认＆＃39;所有设备的大小。如果你想要一个可接受的标题大小，我宁愿选择＆＃34; Full HD＆＃34;分辨率（ 1920px 宽度）。这是最常见的屏幕尺寸。

有多种方法可以让您的标题图片具有反复性。

只需将标题图片宽度设为100％（最好用css课程）
制作100％的屏幕宽度div并将标题图片放在背景中并设置背景尺寸：封面。

修改当您对所有屏幕尺寸使用1个图像时，请确保即使是小型设备也必须下载孔全屏图像（并将其缩小到文档宽度）。最好的方法是多个图像和媒体查询

编辑2： @Turtle是对的。 1366是最常见的屏幕尺寸。 http://www.w3schools.com/browsers/browsers_display.asp

我的坏^^

Answer 2

在这种情况下，尺寸等于质量。

您可以提供图像CSS属性，例如background-size: cover和width:100%，这些属性会覆盖/拉伸图像以填充它所包含的div。请注意，在较大的视图端口上分辨率为（1580x1050像素）的图像看起来像素化为div的宽度（如果是100％且使用整个视口）大于图像。

@ 0x4Dark为您提供虚假信息，其中1920px是最常见的屏幕尺寸，因为它实际上是1366x768。

但是，为了使您的图像在所有设备上都能看起来不错，我通常会使用宽度不小于1920像素的图像，这样可以确保您的图像在所有设备上看起来都很棒。最好通过使用根据视口大小更改图像大小的媒体查询来完成此操作。

Answer 3

问题一看起来有点微不足道，正如你所说，没有一个＆＃34;默认＆＃34; 大小，这应该根据具体情况来决定。如果您认为它看起来不错，并且在用户的浏览器上没有占用太多空间，那么请使用它。如果它看起来太大，那就让它变小，这只是设计师的偏好。

至于问题二：您可以通过几种不同的方式在所有屏幕上制作标题图像。当你要求CSS解决方案时，我将首先开始。

您可以通过简单的媒体查询来改变图像的宽度/高度，具体取决于屏幕分辨率。将高度设置为百分比值，然后设置最大高度值（以像素为单位）以阻止标题变得过大可能是有益的。 Read more on media queries here.

<强> 实施例

@media only screen and (max-device-width: 667px){
img { height: 50%;
      max-height: 200px;
    }
}

另一种方法是拥有不同大小的多个标题图像，最适合不同的屏幕分辨率。这可以在CSS或JQuery中实现。

<强> CSS
（此方法在FireFox 40.0.2和Internet Explorer 11.0.9600.17905中不起作用）

@media only screen and (max-device-width: 667px){
    .imgClass{
        content:url("img/mobileimg.png");
    }
}
@media only screen and (min-device-width: 667px){
    .imgClass{
        content:url("img/desktopimg.png");
    }
}

<强> JQuery的
使用`$（window）.width（）;找到窗口宽度。您可以根据需要为不同的分辨率创建if语句的多个部分。

$(function() {
  if($(window).width() <= 667) {
    $("img").each(function() {
      $(this).attr("src", $(this).attr("src").replace("img/desktopimg.png", "img/mobileimg.png"));
    });
  }
});

标题图片：大小和响应

3 个答案: