CODEWITHSUNDEEP
htmlcss
Dom
Dom

Reputation: 187

anchor tag clickable area larger than image inside

Seen this question asked quite a few times, but seems like solutions work for some but not others:

Code is as follows:

.headbuttons {
  opacity: .7; 
  background-color: grey; 
  background-blend-mode: overlay; 
  display: block;
}
<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html"> 
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>

Tried the suggested solution of inline-block and block to display but neither worked, clickable area still much larger than image itself.

Upvotes: 1

Views: 1966

Answers (3)

Johannes Riedmann
Johannes Riedmann

Reputation: 36

The solution provided by Luka Kerr surely works for this particular use case. However, as a general solution, you can just add the css property display: block; to your <img> tag and the <a> around it will automatically scale to the size of your img (even when its size changes).

.headbuttons {
  opacity: .7;
  background-color: grey;
  background-blend-mode: overlay;
  display: block;
}

.headbuttons img {
  display: block;
}
<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html">
  <img src="C:\Users\Dom Nguyen\Documents\home_button.png">
</a>

Upvotes: 0

JMA
JMA

Reputation: 1825

Just change your css to the following, which includes width and height:

.headbuttons {
  opacity: .7; 
  background-color: grey; 
  background-blend-mode: overlay; 
  display: block;
  width: 125px;
  height: 62.5px;
}
<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html"> 
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>

Upvotes: 1

canhongpoxiao
canhongpoxiao

Reputation: 1

I think you can set with width and height, something look like: <a width="125" height="62.5">

Upvotes: 0

Related Questions