Jump to content
MoonNightFlyer

Clickable Image Links Extend Beyond Images

Recommended Posts

Hello to all,

I have created a basic web page, with one main image and using block display
img {
  display: block;
  margin-left: auto;
  margin-right: auto;

Centering the image and sizing it with a percentage.
<img src="img.png" alt="text" style="width:80%;">


Below the image I have five small clickable image links.
stacked one above the other.
The issue is, that the clickable area of each image , 
extends  beyond the image on both sides to the width of the page.
The display block I am sure is causing this and the stacking, 
( Which  I am happy on how this looks ).
I would appreciate guidance on how to resolve this and allow only the areas
of the image links to be clickable
Best regards, MoonNightFlyer

Share this post


Link to post
Share on other sites

Set those links used for image links to that of img styling with width 80%, the img tag to width: 100%.

CSS:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
width: 80%;
} 

a.img_wrap {
  display: block;
  margin-left: auto;
  margin-right: auto;
width: 80%;
} 

a.img_wrap img{
width: 100%;
height: auto;
}

HTML:

<img src="whatever.png" alt="">

<a href="whatever.whatever1" class="img_wrap">
  <img src="whatever1.png" alt="">
</a>

<a href="whatever.whatever2" class="img_wrap">
  <img src="whatever2.png" alt="">
</a>

<a href="whatever.whatever3" class="img_wrap">
  <img src="whatever3.png" alt="">
</a>

 

  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...