css - div 始终位于页面顶部，随机图像自动适合该 div

Question

原谅我的无知，让我解释一下。

我希望 div 在网页中始终完全可见。它是一个包含随机图片的 div，然后是“阅读更多”按钮。因此，如果图像适合 div，并且当页面完全向上滚动时，div 和按钮始终可见，那就太好了。

因此，它是 header ，然后是“容器 div”。在“容器 div”中，最上面的第一件事是“阅读更多”div。不是 position : fixed 因为这在移动设备上效果不佳。我想我必须做类似的事情

width : 50%
height : 
get the current height of the screen - height of the header = this is where it begins
get the current height of the screen - height of the footer - height of a text - height of a button = this is where it stops

但是我该怎么做呢？高度是屏幕尺寸的结果，并基于百分比，因此它也是响应式设计

此外，div 包含一个随机图像，该图像必须自动调整大小以适合并且不会被拉伸(stretch)。

随机是指它可能是“纵向”或“横向”。我读了这个article但仅设置 width:100% 会拉伸(stretch)“纵向”图像。

我该如何解决这个问题？

提前致谢

对不起我的英语。

Answer 1

对于固定位置，您可以使用此解决方案，如下所示:What is the simplest jQuery way to have a 'position:fixed' (always at top) div?

$(window).scroll(function() {
  $('.headup').css('top', $(this).scrollTop() + "px");
});

对于图片，可以使用max-width:

img {
   max-width: 100%;
}

http://jsfiddle.net/9sTXa/