Html 标题图像：大小和响应性

我正在尝试建立一个网站，并希望添加一个类似于以下示例的标题图像：1。）2。）

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

我的问题：

1.）在台式计算机上查看的标题图像大小的可接受宽度和长度是多少

我知道可能没有一个“默认”大小来控制它们，但我希望得到一些维度的指导，我可以使用这些维度在photoshop中前进，甚至调整当前标题图像的大小

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

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

---

谢谢。

你说得对，所有设备都没有“默认”大小。 如果您希望标题的大小可以接受，我更喜欢“全高清”分辨率（1920pxwidth）。这是最常见的屏幕尺寸

有多种方法可以使标题图像响应

只需将标题图像宽度设置为100% （使用css类更好）

制作一个100%屏幕宽度的div，将标题图像置于背景中，并设置背景大小：cover

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

编辑2: @乌龟是对的。1366是最常见的屏幕尺寸

---

在这种情况下，我的坏尺寸等于质量

您可以为图像提供CSS属性，例如

背景大小：cover

和

宽度：100%

，这些属性将覆盖/拉伸图像以填充它所包含的

div

。请注意，在较大的视口上，分辨率为（1580x1050px）的图像将看起来是像素化的，因为div的宽度（如果100%并使用整个视口）大于图像

@0x4Dark提供了错误信息，1920px是最常见的屏幕大小，因为它实际上是1366x768

---

然而，为了让你的图像在所有设备上看起来都很好，我通常会使用宽度不小于1920像素的图像，这样可以确保你的图像在所有设备上看起来都很好。这可以通过使用媒体查询更好地完成，该查询根据视口的大小更改图像大小。

问题一似乎有点微不足道，正如您所说，没有一个“默认”大小，这应该根据具体情况来决定。如果您认为它看起来不错，并且不会占用用户浏览器的太多空间，那么就使用它。如果它看起来太大，就把它缩小，这只是设计师的喜好

然而，关于问题二： 有几种不同的方法可以在所有屏幕上生成标题图像。当您要求CSS解决方案时，我将首先从这个开始

解决这一问题的一个基本方法是使用简单的媒体查询，根据屏幕分辨率更改图像的宽度/高度。将高度设置为百分比值，然后设置最大高度值（以像素为单位），以防止标题变得过大，这可能是有益的

示例

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

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

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"));
    });
  }
});

$（函数（）{
如果（$（window）.width（）简写为：1）使用不同的背景和多个媒体查询2）使用背景大小：封面和视口单元请注意！你说得对。1920px仅为16%左右。Sry，我的不好。
@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");
    }
}

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