我正在尝试建立一个网站，并希望添加类似于以下示例的标题图像：1.) http://bit.ly/1PP0Shr 2.) http://bit.ly/1PP1h3n
我当前的标题图片是 1580 x 1050 像素的照片。
我的问题：
1.) 在台式计算机上查看的标题图像尺寸可接受的宽度和长度是多少？
我知道可能没有一个“默认”尺寸来统治它们，但我想要一些尺寸方面的指导，我可以使用这些尺寸向前推进，甚至在 Photoshop 中调整我当前的标题图像的大小。
2.) 我应该使用什么 CSS 代码使标题图像在所有屏幕上都响应？
是否有一些特定的背景属性可以应用到我的 CSS 样式表中？我什至简要地阅读了有关媒体查询的内容，但目前对如何使用它们还不够了解。
谢谢。
【问题讨论】：
标签： html css image responsive-design
您是对的，所有设备都没有“默认”尺寸。 如果您想要一个可接受的标题大小，我更喜欢“全高清”分辨率（1920px 宽度）。这是最常见的屏幕尺寸。
有多种方法可以使您的标题图像具有响应性。
编辑： 当您对所有屏幕尺寸使用 1 Image 时，请确保即使是小型设备也必须下载孔全屏图像（并将它们缩小到文档宽度）。最好的方法是多张图片和媒体查询
编辑 2： @Turtle 是对的。 1366 是最常见的屏幕尺寸。 http://www.w3schools.com/browsers/browsers_display.asp
我的坏^^
【讨论】：
在这种情况下，尺寸等于质量。
您可以为图像提供 CSS 属性，例如 background-size: cover 和 width:100%，它们将覆盖/拉伸图像以填充它所包含的 div。请注意，在较大的视口上，图像的分辨率 ( 1580x1050px）会看起来像像素化，因为 div 的宽度（如果 100% 并使用整个视口）大于图像。
@0x4Dark 向您提供虚假信息，1920 像素是最常见的屏幕尺寸，因为它实际上是 1366x768。
但是，为了让您的图片在所有设备上看起来都很好，我通常会使用宽度不小于 1920 像素的图片，以确保您的图片在所有设备上都看起来很棒。这可以通过使用根据视口大小更改图像大小的媒体查询来更好地完成。
【讨论】：
问题一似乎有点微不足道，正如您所说，没有一个 "default" 大小，这应该根据具体情况来决定。如果您认为它看起来不错，并且不会在用户的浏览器上占用太多空间，那么请使用它。如果它看起来太大，让它变小，这只是设计师的喜好。
然而，至于问题二： 有几种不同的方法可以在所有屏幕上制作标题图像。正如你要求的 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"));
});
}
});
【讨论】：