网格 横跨整个浏览器

Grid Stretch across the entire broswer.

本文关键字:浏览器 网格      更新时间:2023-09-26

大家好,

我是JavaScript和CSS的新手。我需要一个 JavaScript 或 CSS 代码来拉伸网格 5 x 2 以及完全跨越浏览器宽度的图片。例如,在页面中间 http://www.cornell.edu/网格布局查看此站点。放大/缩小网格将拉伸整个浏览器宽度,无论屏幕尺寸如何。我了解使用带有封面功能的CSS方法背景图像是否会使整个浏览器变宽,但对于不是程序员的用户来说不容易编辑。这是我到目前为止得到的信息。

function resizeJqGridWidth(grid_id, div_id, width)
    {
$(window).bind('resize', function() {
    $('#' + grid_id).setGridWidth(width, true); //Back to original width
    $('#' + grid_id).setGridWidth($('#' + div_id).width(), true);//Resized to new width as per window
 }).trigger('resize');
  }

任何建议都会很棒。多谢!

你的意思是使用

box-sizing:border-box;
width: 20%;

在每个图像上。这将允许 5 个项目横跨屏幕,并且作为 5 个物理总数的日志,至少是您内容区域的最大宽度,这将完美适合并在您缩小屏幕时重新调整大小。