Question

我有一个输入标签，人们可以在其中使用图像或 pdf，我想使用 iframe 显示该文档，但它向文档添加了水平和垂直滚动，而我希望文档宽度适合 iframe宽度并保持垂直轴的滚动。有点像包含背景图像的 css 属性。

#div-test-img {
  height: 100px;
  width: 100px;
  background-image: url('https://source.unsplash.com/user/c_v_r');
  overflow-y: auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#iframe-test-img {
  height: 100px;
  width: 100px;
  overflow-y: auto;
}

<div id="div-test-img"></div>
<iframe id="iframe-test-img" src="https://source.unsplash.com/user/c_v_r">

我希望 iframe 显示类似于 div，同样应该使用 pdf。如果可能，请以图像和 pdf 的示例回答。任何帮助将不胜感激..

Answer 1

如果您只想使用图像和 pdf，您可以这样做：

#div-test-img {
  height: 100px;
  width: 100px;
  background-image: url('https://source.unsplash.com/user/c_v_r');
  overflow-y: auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#test-img {
  height: 100px;
  overflow-y: auto;
}

#iframe-pdf {
  width: 100%;
  height: 100px;
  overflow-y: auto;
}

<div id="div-test-img"></div>
<img id="test-img" src="https://source.unsplash.com/user/c_v_r">
<iframe id="iframe-pdf" src="http://www.africau.edu/images/default/sample.pdf"></iframe>

如何仅从 iframe 中删除水平滚动条？

1 个答案: