CODEWITHSUNDEEP
javascripthtmlcsspdf
Shan Rauf
Shan Rauf

Reputation: 15

Problem with Linking an Image to a PDF file with <a>

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

I'm not sure if this error is due to an html, css, or javascript problem, but I posted the github and website below:
https://readcoloringbooks.netlify.com/
https://github.com/ShanRauf/ReadColoringBooks

Upvotes: 0

Views: 1077

Answers (2)

Konda
Konda

Reputation: 78

The Code worked fine for me. here is an example of how i would do it - 

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

It's best not to have spaces in your URLs, so either encode them or remove spaces in the file name, e.g. /my title to /my%20title

And ensure that the image you're loading is actually high resolution. Also, check to see if there is any CSS overriding content wrapped by <a>

Upvotes: 0

id3vz
id3vz

Reputation: 480

I wrote an answer before and it was wrong sorry for that. The solution is to replace all your

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

with

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

and at your file css/library.css replace 

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

with

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

and I'd recommend changing that 

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

with a div

Upvotes: 1

Related Questions