Html 不使用JS就可以实现这种灵活的布局吗？_Html_Css

Html 不使用JS就可以实现这种灵活的布局吗？

html css

Html 不使用JS就可以实现这种灵活的布局吗？,html,css,Html,Css,我不使用JS试图实现的目标可以在上看到基本上，我想显示两幅图像，都居中显示，一幅在背景中，另一幅在前景中：背景图像：应覆盖整个窗口，而不影响纵横比，这意味着图像将始终接触窗口的两个相对边缘，但图像将被裁剪圆形图像：应位于窗口内部，而不影响纵横比，这意味着图像将始终接触窗口的两个相对边缘，但图像不会被裁剪它是还是当背景图像从左侧和右侧剪切时，背景图像：是基本上，我只是将背景图像作为的背景（当然不必是主体），然后将图像以较小的边距放在其中 <body> <img

我不使用JS试图实现的目标可以在上看到

基本上，我想显示两幅图像，都居中显示，一幅在背景中，另一幅在前景中：

背景图像：应覆盖整个窗口，而不影响纵横比，这意味着图像将始终接触窗口的两个相对边缘，但图像将被裁剪

圆形图像：应位于窗口内部，而不影响纵横比，这意味着图像将始终接触窗口的两个相对边缘，但图像不会被裁剪
它是
还是


当背景图像从左侧和右侧剪切时，背景图像：
是
基本上，我只是将背景图像作为
的背景（当然不必是主体），然后将图像以较小的边距放在其中
<body>
  <img id='fg' src='http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg'></img>
</body>

显然，如果窗口太大，就会出现问题。您可以（我猜）使用媒体查询根据窗口大小引入不同的图像大小
编辑-好的，对于图像来说，如果你真的想裁剪并保持正确的纵横比，那么我认为你必须提前知道图像的大小，这样才能工作。没有那
如果知道图像尺寸，则可以设置“最大高度”和“最大宽度”。（我也试试看：-）
再次编辑以使背景以居中方式裁剪，您需要将位置设置为“居中”，而不是“左上”。（如果您只想让它水平居中，可以选择“居中顶部”。）
没有尖端非标准功能（灵活的方框布局）的CSS垂直居中元素很难实现。这可能与JavaScript有关。我要说的是，任何JavaScript解决方案的一个问题是，它确实会减慢浏览器的速度。如果您必须这样做，我建议引入一点时间延迟，这样您就不会在每次调整大小事件时尝试重新计算布局。相反，在将来工作完成的地方设置一个大约200毫秒的计时器，每次这样做都会取消上一个计时器。这样，当一个人拖动窗口的一角时，它不会烧掉他们的CPU
编辑更多哦哦是的@Kent Brewster的答案垂直居中很好-我总是忘了那个把戏：-）
试试这个：
<html>
<style>
body {
  margin: 0;
}
#bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent url(bg.jpg) 50% 50% no-repeat;
  background-size: cover;
}
#fg {
  position: absolute;
  height: 90%;
  width: 90%;
  top: 5%;
  left: 5%;
  background: transparent url(fg.jpg) 50% 50% no-repeat;
  background-size: cover;
  opacity: .7;
}
</style>
<body>
<div id="bg"></div>
<div id="fg"></div>
</body>
</html>


身体{
保证金：0；
}
#背景{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：透明url（bg.jpg）50%50%无重复；
背景尺寸：封面；
}
#前景{
位置：绝对位置；
身高：90%；
宽度：90%；
最高：5%；
左：5%；
背景：透明url（fg.jpg）50%50%无重复；
背景尺寸：封面；
不透明度：.7；
}

如果扩展需求是灵活的，那么它可能会起作用。查看以查看其运行。
仅使用CSS无法实现此效果，主要原因有两个：
由于您正试图调整图像大小，因此不能使用background
属性，而必须使用
标记。如果未设置宽度和高度，您的图像将始终尝试占据尽可能多的空间。因此，纵横比将不会保持，或者图像将被裁剪
调整图像大小的另一个警告是，在不知道其尺寸的情况下，无法将图像垂直对齐到页面中心

在看了@Kent Brewster之后，我认为我可以达到OP的所有要求
这不存在前景图像被裁剪的问题，您还可以在前景图像周围指定恒定的边距。另外，由于我们使用的是背景图像，因此使用了div
而不是img
标记。这是密码，这是代码：
<div id='bg'></div>
<div id='fg'></div>

#bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(http://i.imgur.com/iOvxJ.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
#fg {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  opacity: .7;
  background-image: url(http://i.imgur.com/HP9tp.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}


#背景{
位置：绝对位置；
身高：100%；
宽度：100%；
背景图片：url(http://i.imgur.com/iOvxJ.jpg);
背景重复：无重复；
背景位置：50%50%；
背景尺寸：封面；
}
#前景{
位置：绝对位置；
顶部：10px；
左：10px；
底部：10px；
右：10px；
不透明度：.7；
背景图片：url(http://i.imgur.com/HP9tp.jpg);
背景重复：无重复；
背景位置：50%50%；
背景尺寸：包含；
}
嗯，它的反应不是我想要的。检查我的例子，你会发现你总是可以看到至少一个完整的背景和整个前景图像。你的例子中的背景和前景的行为方式都与OP的小提琴一样。对不起，我误读了第二部分-我认为它们都会被裁剪。我认为背景不错。给我一点时间。背景也不好，因为我总是只能看到图像的左上角。啊，那么我想我也可以做到：-）他还想调整它的大小。这不仅仅是定位。我在屏幕截图中看不到任何大小调整。+1用于使用背景大小。但它需要背景大小：contain#fg
元素上的code>，比如。它很好，使用了一些高级的背景css属性，但是如果你将其设置为非常宽和很小的高度，它会切割前景鹰。是的。。在玩了更多之后，我可以看到前景图像正在被裁剪。。哪一个不是最佳的。。主要目标是让该图像始终显示，并尽可能好地显示在背景中。很抱歉，图像链接太长（如果您想使用相同的链接，我现在就修复了它们），因为原始示例是由@tzador（）创建的，我不介意使用标记。无论如何。。让我们假设图像大小是预先知道的，我可以在CSS中使用它们。这有帮助吗？还是仍然不可能..？标记无法用于调整大小，因为它可以
body {
  margin: 0; padding: 0;
  overflow: hidden;
  background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}

body, html { width: 100%; height: 100%; }

#fg {
  margin: 2%; width: 96%; height: 96%;
  opacity: 0.7;
  background: url('http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg') no-repeat center center;
}

<html>
<style>
body {
  margin: 0;
}
#bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent url(bg.jpg) 50% 50% no-repeat;
  background-size: cover;
}
#fg {
  position: absolute;
  height: 90%;
  width: 90%;
  top: 5%;
  left: 5%;
  background: transparent url(fg.jpg) 50% 50% no-repeat;
  background-size: cover;
  opacity: .7;
}
</style>
<body>
<div id="bg"></div>
<div id="fg"></div>
</body>
</html>

<div id='bg'></div>
<div id='fg'></div>

#bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url(http://i.imgur.com/iOvxJ.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
#fg {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  opacity: .7;
  background-image: url(http://i.imgur.com/HP9tp.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}