Проблема с привязкой изображения к файлу PDF с <a>

Question

Я создаю веб-сайт, который отображает пару обложек книг в виде изображений.Изображения отображаются правильно, за исключением случаев, когда я помещаю теги вокруг тега 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>

Изображение искаженного изображения рядом снормальное изображение

Я не уверен, связана ли эта ошибка с html, css или javascript, но я разместил на github и веб-сайте ниже:
https://readcoloringbooks.netlify.com/
https://github.com/ShanRauf/ReadColoringBooks

Answer 1

Код работал нормально для меня.вот пример того, как я бы это сделал -

<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

И убедитесь, что загружаемое изображение имеет высокое разрешение.Также проверьте, есть ли перезаписываемый контент CSS, обернутый <a>

Answer 2

Я написал ответ раньше, и это было неправильно, извините за это.Решение состоит в том, чтобы заменить все ваши

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