Question

我有一个缩放到窗口大小的SVG图像。元素应放在图像上方，相对于其大小。由于图像的大小在不同的浏览器窗口中发生变化，因此定位参数应该是左边图片宽度的30％。

问题是，浏览器添加了＆＃34;填充＆＃34;保持纵横比。然而，这＆＃34; padding＆＃34;不是CSS，我没有找到任何方法来访问图像渲染参数的任何数据。

听起来很复杂？以下是外部fiddle或查看下面相同的代码（问题仅在全屏模式下显示）。调整浏览器窗口大小时，主题标签应保持在图像上方的相同位置，但它会移动到周围，因为在图像的两侧添加了填充。

我找不到任何方法来访问svg属性以获得类似实际图像原点（减去填充）或实际图像大小的内容。任何使用js，JQuery，css等的解决方案都可以。

＆＃13;

body {
  overflow: hidden;
}

img#test {
  position: absolute;
  height: 100%;
  width: 100%;
}

div#test {
  position: absolute;
  padding-left: 31%;
  padding-top: 8%;
  color: #000;
  font-size: 50px;
}

＆＃13;

<html>

  <body>

    <img src='data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aCBkPSJNNjUsMjBhMTUsMTUsMCwxLDEsMTUsMTVoLTYwYTE1LDE1LDAsMSwxLDE1LTE1djYwYTE1LDE1LDAsMSwxLTE1LTE1aDYwYTE1LDE1LDAsMSwxLTE1LDE1eiIgc3Ryb2tlPSIjRDcwIiBzdHJva2Utd2lkdGg9IjgiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg=='
      id='test'>

    <div id='test'>#</div>

  </body>

</html>

＆＃13;

更新

来自ccprog的答案很好，但是让我有点头疼来计算出正确的宽高比。以下是正确设置的示例，当纵横比不是1：1时（如示例中所示）：

图像分辨率：544 x 400（宽x高）
纵横比（宽度：高度）：544/400 = 1.36 =＆gt; 1.36：1 =＆gt; 136：100
纵横比（高度：宽度）：400/544 = 0.73529 ... =＆gt; 74：100

生成的媒体查询如下所示：

＆＃13;

media (min-aspect-ratio: 136/100) {
  .box {
     width: 136vh;
     height: 100vh;
  }
}

@media (max-aspect-ratio: 136/100) {
  .box {
     width: 100vw;
     height: 74vw;
  }
}

＆＃13;

Answer 1

只要您事先知道宽高比，就可以将一些CSS功能结合起来。

aspect-ratio媒体查询可以决定屏幕尺寸是宽还是小于图像宽高比
视情况而定，对于宽屏幕使用vh单位，对于小屏幕使用vw单位来调整与图像具有相同宽高比的包装div的大小
使用flex布局将其放置在屏幕中间，模仿SVG视图框的行为。

然后你可以将你的元素放在那个外部div中。

以下示例使用宽高比为1/1的图像。对于其他值，您必须在媒体查询中替换它，并调整宽屏幕的宽度和小屏幕的高度以获得正确的比率。

我给包装div一个蓝色边框以显示效果。

＆＃13;

body {
    overflow: hidden;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

img#test {
  position: absolute;
  height: 100%;
  width: 100%;
}

.box {
    border: 1px solid blue;
    box-sizing: border-box;
    position: relative;
}
.hash {
    position: absolute;
    left: 31%;
    top: 8%;
    color: #000;
    font-size: 50px;
}

@media (min-aspect-ratio: 1/1) {
    .box {
        width: 100vh;
        height: 100vh; /* stays constant for all ratios */
    }
}
@media (max-aspect-ratio: 1/1) {
    .box {
        width: 100vw; /* stays constant for all ratios */
        height: 100vw;
    }
}

＆＃13;

<img src='data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aCBkPSJNNjUsMjBhMTUsMTUsMCwxLDEsMTUsMTVoLTYwYTE1LDE1LDAsMSwxLDE1LTE1djYwYTE1LDE1LDAsMSwxLTE1LTE1aDYwYTE1LDE1LDAsMSwxLTE1LDE1eiIgc3Ryb2tlPSIjRDcwIiBzdHJva2Utd2lkdGg9IjgiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg=='
  id='test'>
<div class="box">
    <div class="hash">#</div>
<div>

＆＃13;

通过缩放SVG进行元素定位

1 个答案: