Jump to content

Clickable Image Links Extend Beyond Images


MoonNightFlyer

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

Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...