使用 <a> 将图像链接到 PDF 文件的问题答案

【问题标题】：Problem with Linking an Image to a PDF file with <a>使用 <a> 将图像链接到 PDF 文件的问题
【发布时间】：2018-09-23 02:25:03
【问题描述】：

我正在创建一个网站，该网站将几本书的封面显示为图像。图像显示正常，除非我在 img 标签周围放置标签（因为我想将图像链接到书的 pdf）：

    <!-- Bookshelf -->
    <ul class='list-inline'>
      <li class='book'>
        <a href="./books/Things Fall Apart – Achebe.pdf" target="_blank">
            <img src='./img/bookshelf/things-fall-apart.jpg'>
        </a>
      </li>

      <li class='book'>
        <img src='./img/bookshelf/to-the-lighthouse.jpg'>
      </li>

Picture of the distorted image next to a normal image

我不确定这个错误是由 html、css 还是 javascript 问题引起的，但我在下面发布了 github 和网站：
https://readcoloringbooks.netlify.com/
https://github.com/ShanRauf/ReadColoringBooks

【问题讨论】：

anchor 标签的默认样式可能会给您带来意想不到的结果。通过查看提供的图像，我看不出您解释的问题。
我也没有，我看不到问题所在。你能详细说明一下吗？ :)

标签： javascript html css pdf

【解决方案1】：

我之前写了一个答案，这是错误的对不起。解决方案是更换所有的

`<li class="book"></li>`

与

`<a class="book"></a>`

在您的文件中css/library.css 替换

.bookshelf li {
    margin: 0 30px 30px 0;
}

与

.bookshelf a {
    margin: 0 30px 30px 0;
}

我建议改变它

<ul class="list-inline"><ul>

div

【讨论】：

非常感谢，这个解决方案几乎完美。我必须将 a 标签的显示设置为 inline-block，否则每行只显示一本书。否则，非常感谢！
是的，对不起，我忘记了，别忘了把答案加起来?或标记为正确

【解决方案2】：

代码对我来说很好用。这是我将如何做的一个例子 -

<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" target="_blank">
  <img src="https://i.ytimg.com/vi/YCaGYUIfdy4/maxresdefault.jpg" />
</a>

最好不要在 URL 中包含空格，因此要么对其进行编码，要么删除文件名中的空格，例如/my title转/my%20title

并确保您正在加载的图像实际上是高分辨率的。另外，检查是否有任何被<a>包裹的CSS覆盖内容

【讨论】：