调整大小，移动和缩放图像和文本分区与浏览器调整大小

Resizing,moving and scaling image and text divs wiith browser resizing

本文关键字：调整 分区 文本 浏览器 图像 移动 缩放      更新时间：2023-09-26

我以为这是一个在谷歌上很常见的问题，但我似乎找不到答案。如有任何帮助，我们将不胜感激。

我有一个全尺寸可重调背景图片的网页。类似这样的东西：

html
{
    background-size:contain;
    background: black url(../images/myimage.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
}

在图像上，我有一个部分专门用于包含图像的z层DIV和包含一些文本的另一个z层DIV。

当我开始重新调整浏览器窗口的大小时，我的页面DIV会变得疯狂。当页面及其背景图像变得越来越小时，它们实际上保持静止。

我如何确保包含图像、链接和文本的DIV始终位于正确的位置，无论用户的屏幕分辨率如何，也无论他们如何调整浏览器大小。CSS？Javascript？JQuery？最好的方法是什么？

提前感谢！！！

p.s.如果有什么不清楚的地方，需要样品，请告诉我。

Css是您的最佳选择。您需要根据具体情况将div的位置设置为fixed、absolute或relative。当用户滚动时，fixed将使项目保持其位置，而absolute将使项目与页面的其余部分一起滚动，并将转到您告诉它的任何位置，无论它是否在其他内容中。relative获取它相对于它所在的任何父容器元素的位置，或者如果它不在另一个容器元素内，则获取窗口本身的位置。

如果是fixed或absolute，如果用户重新调整窗口大小或根据分辨率，则分配right将保持其位置与屏幕右侧对齐，并且left、top和bottom也将相应地起作用。您可以为它们指定一个百分比，该百分比也会随着分辨率或大小的调整而相应变化。或者，您可以以像素、厘米、毫米、英寸等为单位分配硬编码值。下面是一个jfiddle作为代码示例

在我看来，请执行以下操作：

  • 从背景图像中去除多余的白色间隔

  • -从body标签中删除背景图像，并使用类似主div的方式，将所有内容放在
    中

  • -删除div"element1"并将背景色添加到"content1"div本身

  • -要处理基于屏幕分辨率的内容定位，有两种方法：-1）使用CSS媒体查询2）使用CSS 进行相对定位

  • -如果您支持广泛的分辨率，那么使用Css媒体查询可能会变得乏味，因此请改用Css相对定位。

例如

<div class="wrapper">
  <div class="content1">Content</div> 
</div> 
.wrapper{ position:relative; width:100%; overflow:hidden; background:url(yourBgImage.jpg);background-size:100% 100%;}
.content1{position:absolute; top:20%; left:10%;}
相关文章：