在较小的屏幕上更好地调整图像大小？

Question

标题可能会产生误导。

这是我的代码：

#headerimg {
background: url('http://artotek.fi/css/images/artoteklogo.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
border-bottom: solid #696969 2px ;
background-size:  200px 250px;
display: block;
width: 100%;
-webkit-box-shadow: inset 0px -6px 5px 3px rgba(76, 76, 94, 0.9);
-moz-box-shadow:    inset 0px -6px 5px 3px rgba(76, 76, 94, 0.9);
box-shadow:         inset 0px -10px 15px 3px rgba(76, 76, 94, 0.9);
height: 300px;
}

此代码用于将标题图像保留在同一位置，直到向下滚动，当它隐藏在内容后面时。

以下是一些图片：

---

16“笔记本电脑^

---

24“桌面（如果this站点可信）^

---

在任何屏幕上加载页面时，图片应始终保持在标题中（已尝试background-size: cover;）。

以像素为单位设置位置是没有希望的，而且百分比也是如此。

当页面滚动到顶部时，如何让图像保留在div中？

Fiddle

Live demo

Answer 1

fiddle

修改CSS：

#headerimg {
background: url('http://artotek.fi/css/images/artoteklogo.gif');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 50px;/* middle 50px from top -> equal to margin-top #wrapper*/
border-bottom: solid #696969 2px ;
/*background-size:  200px 250px;*/ /*removed*/
display: block;
width: 100%;
-webkit-box-shadow: inset 0px -6px 5px 3px rgba(76, 76, 94, 0.9);
-moz-box-shadow:    inset 0px -6px 5px 3px rgba(76, 76, 94, 0.9);
box-shadow:         inset 0px -10px 15px 3px rgba(76, 76, 94, 0.9);
height: 300px;
}

将以下内容添加到您的js：

var IMAGEWIDTH = 300;// WIDTH OF THE IMAGE
var IMAGEHEIGHT = 521;// WIDTH OF THE IMAGE
var headerimg = jQuery("#headerimg");
headerimg.css({"background-size":Math.round(Math.min(headerimg.height(),IMAGEHEIGHT)*0.5)+"px "+Math.round(Math.min(headerimg.width(),IMAGEWIDTH)*0.5)+"px"});