Question

I am creating a website that displays a couple of book covers as images. The images display properly except when I put a tags around an img tag (because I want to link the image to a pdf of the book):

    <!-- 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

将图像链接到PDF文件时出现问题

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

Answer 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

Answer 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>

最好不要在网址中留空格，因此请对它们进行编码或在文件名中删除空格，例如/my title至/my%20title

并确保要加载的图像实际上是高分辨率的。此外，请检查是否有<a>

包装的CSS覆盖内容

使用<a>

2 个答案: