Image with hyperlink stretches across viewport

Question

I've tried resizing the div. After that I gave up on the div as the problem seems not to be there, but in the hyperlink itself. When I remove the hyperlink it seems to fit in. I need to preserve the hyperlink, size the border to fit the image (because I need two images in the same line) and keep the zoom inside the div.

Here's the fiddle: https://jsfiddle.net/Zvonimir1308/5p2y16w7/26/

a[href $= ".jpg"] {
  margin: 20px;
  border: 1px solid black;
  overflow: hidden;
}

a[href $= ".jpg"] img {
  transition: transform .4s;
}

a[href $= ".jpg"]:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}

a[href $= ".jpg"] {
  display: flex;
  columns: 2;
  margin: 0 0;
  border-radius: 5px;
}

<div id="#container">
  <a href="https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg"><img src="https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg"></a>
</div>

Rafael Tavares · Accepted Answer · 2020-02-14T13:21:17.327

First: your div id should be set as <div id="container">, there is no need to insert the # in there.

The div default display is set to block. So, after fixing the div id, just add display: inline-block to the div:

#container {
  display: inline-block;
}

Why changing from block to inline-block? According to w3school

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

Also, if you have questions about inline vs inline-block vs block, I recommend you to read this answer.

Final result:

a[href $= ".jpg"] {
  margin: 20px;
  border: 1px solid black;
  overflow: hidden;
}

a[href $= ".jpg"] img {
  transition: transform .4s;
}

a[href $= ".jpg"]:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}

a[href $= ".jpg"] {
  display: flex;
  columns: 2;
  margin: 0 0;
  border-radius: 5px;
}

#container {
  display: inline-block;
}

<div id="container">
  <a href="https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg"><img src="https://as.ftcdn.net/r/v1/pics/7b11b8176a3611dbfb25406156a6ef50cd3a5009/home/discover_collections/optimized/image-2019-10-11-11-36-27-681.jpg"></a>
</div>

Thank you very much! I'm still new to this as this is for a (first) project I'm doing for college hence the obvious errors. — Zvonimir1308, Feb 14 '20 at 13:42
You're welcome :). Making mistakes is normal, doesn't matter how much time of your life you've spent programming. The important part is to research and make some effort to find an answer, then if you aren't able to accomplish what you need, you can make a question here on SO! — Rafael Tavares, Feb 14 '20 at 13:45

Image with hyperlink stretches across viewport

1 Answers1