How to make a full image inside href be clickable - html

Question

simple question, I'm doing something wrong, but didn't get what the problem here. I want to make images clickable as it was links, but this isn't working properly, with the link staying in the middle only, not staying the full image as I want. Someone could help?
<div>
<ul class="principaisCategorias">
<li class="itemCategoria">
<div class="imagesItemCategoria">
<a data-bind="ccLink:{route: '/category/ar-condicionado-portatil'}">
<img src="/file/general/imageItemCategoria.jpg" />
</a>
</div>
</li>
</ul>
</div>
And here's my css:
div{
display: inline;
font-weight: bold;
text-align: center;
ul{
padding: 0;
margin: 0;
&.principaisCategorias{
width: 102%;
height: 450px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.itemCategoria{
list-style-type: none;
margin-top: 2px;
margin-left: 2%;
margin-bottom: 2px;
margin-right: 2%;
height: 140px;
width: 45%;
background-color: mediumturquoise;
.imagesItemCategoria {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
img, a{
display: block;
width: 100%;
height: 100%;
max-height:100%;
max-width:100%;
}
a{
display: inline-block;
}
}
}
}
}
}

Answer 1

When I tried to run the code initially none of the inner styles were being applied. This is because your CSS is nested like SASS or SCSS. When I refactored to ordinary CSS syntax it started working better.
As far as the a link behavior issue, you do not have an href attribute on that element so it behaves more or less like a <span> tag. There were also several other unnecessary styles in there. This is all I needed to get it to behave as I expected:
.imagesItemCategoria a {
display: block;
cursor: pointer;
}
Full code and working demo:
.wrapper {
display: inline;
font-weight: bold;
text-align: center;
}
ul.principaisCategorias{
width: 102%;
height: 450px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.itemCategoria{
list-style-type: none;
margin-top: 2px;
margin-left: 2%;
margin-bottom: 2px;
margin-right: 2%;
height: 140px;
width: 45%;
background-color: mediumturquoise;
}
.imagesItemCategoria {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.imagesItemCategoria a {
display: block;
cursor: pointer;
}
.imagesItemCategoria img {
width: 100%;
height: auto;
display: block;
}
<div class="wrapper">
<ul class="principaisCategorias">
<li class="itemCategoria">
<div class="imagesItemCategoria">
<a data-bind="ccLink:{route: '/category/ar-condicionado-portatil'}">
<img src="https://picsum.photos/300" />
</a>
</div>
</li>
</ul>
</div>