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

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>

带滚动条的图形

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，以便仍然能够滚动。