Hyperlinking Image

Question

Given my current code, how would I go about hyperlinking an image, so that when the user clicks on the image, the browser opens a new tab, and displays the image?

body {
  margin: 0;
  padding: 0;
}

.img {
  display: grid;
  height: 100%;
}

.center-fit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}

<div class="img"> <img class="center-fit" src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/1363px-Collage_of_Nine_Dogs.jpg'></div>

If you would, please post all the code relevant to the question *in the question itself* - don't hide it behind a link. You shouldn't tell potential helpers who would otherwise love to help that they have to navigate offsite just to have an idea of what you're working with. If the link breaks, the question could be rendered useless to future readers. Please edit your code into the question in a [MCVE], or the question might get closed, thanks. — CertainPerformance, Jan 01 '19 at 22:29
Possible duplicate of [Center image in a link](https://stackoverflow.com/questions/38030040/center-image-in-a-link) — ecg8, Jan 02 '19 at 03:27

score 0 · Answer 1 · answered Jan 01 '19 at 23:40

0

This is the easiest way.

<a href='https://anywebsite.com/home'> 
    <img class="center-fit" src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Collage_of_Nine_Dogs.jpg/1363px-Collage_of_Nine_Dogs.jpg' />
</a>

You can wrap a anchor tag (<a href='...'> </a>) around anything and it will hyperlink it to anything.

You can also add <a href='...' target='_blank' </a> and it will

answered Jan 01 '19 at 23:40

Kareem

569
2
18

Yes, but then, the image is not centered: CSS: .img { display: grid; height: 100%; } .center-fit { max-width: 100%; max-height: 90vh; margin: auto; } HTML (original):

Please help - thanks! :) – Xavier Jan 02 '19 at 00:12

Hyperlinking Image

1 Answers1