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

Posted 2023-03-06

【中文标题】div 始终位于页面顶部，随机图像自动适合该 div

【英文标题】：div always on top of page and random image automatically fit that div

【发布时间】：2013-11-21 23:38:07

【问题描述】：

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

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

所以，它是标题，然后是“容器 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 包含一个随机图像，必须自动调整大小以适应并且不会被拉伸。

随机我的意思是它可能是“肖像形”或“风景形”。我读过这个article，但仅设置width:100% 会拉伸“人像”图像。

我该如何解决这个问题？

提前致谢

对不起我的英语。

【问题讨论】：

你能提供一个小提琴或一个plunker吗？

这样的？还是我错过了你的观点？ jsfiddle.net/sCrAZ

@Chad 对不起，不是那样的。我不想使用position fixed，因为我希望图像与页面一起滚动。而且，position fixed 在手机上也有问题。

@hugoderhungrige 对小提琴没有太多经验，我尝试加载图像，但我不能。对不起...

如果您不想使用固定位置，则必须使用 javascript。你想要实现的目标应该有很多 jQuery 插件。

【参考方案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/