Question

我想在浏览器的全屏幕上的 img标记中显示 SVG 图像。但是图像的底部被截断，因此用户无法看到它。

这是我的代码：

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#svgPhoto {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <img id="svgPhoto" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg">
</body>

https://jsfiddle.net/f6shkajk/

Answer 1

您只需将height:100vh;添加到#svgPhoto

＆＃13;

    html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#svgPhoto {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
}

＆＃13;

<img id="svgPhoto" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg">

＆＃13;

Answer 2

您可以将max-height: 100%;规则添加到CSS中。例如，尝试运行下面的代码段。

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#svgPhoto {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 100%;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <img id="svgPhoto" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg">
</body>

在全屏幕上显示img标签内的SVG

2 个答案: