滚动条自动添加到图形元素

Question

当我尝试在 <figure> 元素内添加图像时，有时我会在我的 Markdown 编辑器中看到它旁边的垂直滚动条。如果我将它导出为 HTML，它就消失了，但如果我将它导出为 PDF，滚动条仍然存在。这是不愉快和丑陋的，我不知道如何摆脱它。这就是我用作 html 和 CSS:

figure {
    display: block;
}

figure img{
    max-width: 70%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
figcaption {
    color: #9BB4BC;
    text-align: center;
    font-style: italic;
    font-size: 1em;
}

<figure>
    <img src="https://i.imgur.com/RGLj3oV.jpg" />
    <figcaption>Hello</figcaption>
</figure>

figure with scroll bar

Answer 1

出现垂直滚动条是因为元素的高度不够大，要解决此问题，请使用图形部分的 css 属性 height: auto;。

目前我的解释是您想保持滚动但只是禁用滚动条的显示，为此请执行以下操作。

添加 overflow: hidden; 以隐藏水平和垂直滚动条。

body { overflow: hidden; /* Hide scrollbars */ } 要仅隐藏垂直滚动条或仅隐藏水平滚动条，请使用 overflow-y 或 overflow-x:

body { overflow-y: hidden; /* Hide vertical scrollbar */ overflow-x: hidden; /* Hide horizontal scrollbar */ }

来源：w3school

Answer 2

您可以在 figure 标签内隐藏滚动条。使用：

figure::-webkit-scrollbar{
  display: none;
}

请注意，这可能不适用于所有浏览器，更兼容的方法是在正文或图形的父标签上设置 overflow: hidden，然后按顺序将图形标签设置为 overflow: scroll仍然可以滚动。

滚动条自动添加到图形元素

Scroll bar is automatically added to figure element

html

css

image

markdown

figure