logo标签列表

CSS定位使内部div相对于背景图片定位

htmlcss
3
我有以下用于居中和包含背景图像的外部 div 的 HTML。 这很好用。 我想创建一个相对于图像大小的内部 div，以将 div 放置在图像中的黑色正方形中。 图像大小为1783x1481，内部 div 的四个角应为左上: 397,318 右上: 1140,318 左下: 397,903 右下: 1140,903
我不确定如何处理这个问题，我应该使用百分比吗？ 我应该使用视口高度缩放吗？ 

#outer {
  position: relative;
  background-image: url(https://jrwr.io/terminal.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
<div id="outer">
  <div id="inner">Example Text here</div>
<div>

您可以在我的网站jrwr.io或者这个imgur视频中看到此问题的示例。
1
你的问题中没有HTML代码。 - Johannes
抱歉，这很简单的HTML代码，只包含了主要外部div的样式块。 - Forrest Fuqua
你能否从图像中删除黑色正方形，只将背景添加到内部div中？ - ngearing
不，虽然这很容易。但黑色方块实际上是我正在进行科学研究的 xterm.js 盒子。 - Forrest Fuqua
提供 HTML 代码，伙计。 - PythonProgrammer
3个回答
3
如果您想缩放图像并使其适应视口而不失真，可以使用aspect-ratio属性： 

* {
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: rgb(78, 3, 78);
  overflow: hidden;
}

#outer {
  position: relative;
  background-color: rgb(78, 3, 78);
  background-image: url(https://istack.dev59.com/QhkFU.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: auto;
  width: calc(min(100vw, 120vmin - 10px));
  /* aspect ratio calculates the height */
  aspect-ratio: 1.2/1;
}

#inner {
  position: absolute;
  top: 21%;
  left: 22%;
  width: 42%;
  height: 40%;
  background-color: black;
  font: 2vmin monospace;
  color: limegreen;
}
<div id="outer">
  <div id="inner">
    <br>
  <p>&nbsp;Testing Terminal</p>&nbsp;&gt; <span>ping www.google.com -t </span></div>
</div>


这里，宽度设置为calc(min(100vw, 120vmin - 10px))。

  • 如果视口高度(vh)大于视口宽度(vw)，那么vmin = vw，将使用100vw，并根据长宽比（1783/1481=1.2）自动计算图像高度。
  • 如果vh小于vw，则vmin = vh。宽度将设置为vh的120%。-10px用于避免滚动条。您可以在body上使用overflow:hidden。
1
谢谢！我想它需要使用某种计算功能才能使其工作。这是我的问题的答案。 - Forrest Fuqua
1

你的意思是这样吗？我将其构建为一半大小，以便更好地适应片段，但实际值在其中，只是被注释掉了。

.outer {
      position: absolute;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      width: 100%; 
      height: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      top: 0;
      background-image: url("https://istack.dev59.com/cTRdU.webp");
      opacity: 1;
      margin: 0 auto;
    }

    .inner {
      background: black;
      top: 20%;
      left: 20%;
      right: 20%;
      bottom: 20%;
      position: absolute;
      border: 1px solid white;
    }
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>

<body>
  <div class="outer">
    <div class="inner">&nbsp;
    </div>
  </div>
</body>

几乎，这是正确的想法。但我应该补充说明，我希望背景图像自动缩放以适应浏览器窗口。这就是为什么我添加了100vh来填充大部分屏幕与图像。使用您的解决方案，它是固定大小的，不会随着浏览器窗口的大小而调整大小。 - Forrest Fuqua
我想我明白你的意思了。现在试一下...不过要在扩展模式下运行片段并缩放浏览器...我认为它会产生预期的效果。 - Authentic Science
再接近一点，但我希望内部框的比例与背景图像相同，将图像视为正面拍摄的照片框。无论浏览器的大小如何，我都想补足框架的内部尺寸。 - Forrest Fuqua
那么在这种情况下，您需要百分比...我已经更改了代码片段以反映百分比。您可能需要添加一些媒体查询以在不同的断点上进行更精确的缩放。 - Authentic Science
我也走过这条路。但是当你切换到background-size: contain;时（像原始样式中所做的那样），它会崩溃。可能需要不使用它作为普通img标签。你认为呢？ - Forrest Fuqua
显示剩余2条评论
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接