Issue getting button to be the same size as an image

user_17842881 0
Viewed 154

So, im trying to make it so my code has, at the bottom, 3 buttons next to each other with an image on them, planning on having each image change the text shown above said buttons. The issue is, my button ALWAYS has the same gap between the sides of the image and the sides of the button, changing height merely adds gap to the top and bottom, and reducing width just reduces the size of the whole button. full size button, reduced width.

I'd like to have the 3 images as mentioned next to each other, but have the button merely occupy the area the image does.

.button {
    background-color: Transparent;
    background-repeat: no-repeat;
    /*border: none;*/
    cursor: pointer;
    overflow: hidden;
    width: 23%;
    height:100%;
    padding: 0;
}

.speakers {
    bottom: 0px;
    text-align: center;
}

.speakers ul {
}

.speakers li {
    display: inline;
}
<div class="speakers">
    <ul>
        <li><button class="button"><img src="img/rangel.png" alt="rangel" width="23%" height="auto"></button></li>
        <li><button class="button"><img src="img/grootens.png" alt="grootens" width="23%" height="auto"></button></li>
        <li><button class="button"><img src="img/lupi.png" alt="lupi" width="23%" height="auto"></button></li>
    </ul>

css html
3 Answers

You could use flex on the ul with a gap of 0 to lose the gap.

.speakers ul {
    display: flex;
    gap: 0;
}

I personally would apply the images to the buttons in the css, using background-image and background-size, you'll probably need to and a static width and height to the button too.

...Or maybe try width: fit-content on the button.

user_37322720

Ok so, i managed to get it working by changing my % in the image size to vw. No idea how having vw instead allows the aspect ratio to change, but it works i guess.

user_178428810

To get a better result you should put the image inside of the button and style it with css, in this case i probably make containers for each button and container for all buttons, then the button with 100% width so occupy all the size of the container. Hope you can solve this issue

user_174817770
Related