Html - The image stretches the button or goes beyond its frame

RoDeZ
December 27, 2024
88 views
1 vote
2 Answers

When I insert an img file into the button, it stretches and the text shifts to the lower right corner. What should I do so that the image does not change the size of the button and stays inside it?

.navbar {
  display: flex;
  padding: 2em;
}

.smallbutton {
  display: flex;
  background-color: #959595;
}

.smallbutton button {
  min-width: 158px;
  display: block;
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 14px;
  padding-top: 14px;
  text-decoration: none;
  color: #2B2A2A;
  border-radius: 25px;
  border-color: #959595;
}

<div class="navbar">
  <div class="smallbutton">
    <button class="cob">
                <img src="static/img/calend 1.png" alt="">
                События</button>
    <button>Купить R$</button>
    <button>Лотерея</button>
    <button>Бонусы</button>
    <button>Рефералка</button>
  </div>
</div>

I have already tried to change the location using padding, margin and "transform: translate". I also tried to make the button data using the a tag.
Alas, nothing helped. When using width and height, nothing changed, or the buttons overlapped each other.
When resizing, the second button completely fits on the first one.
This is how it should look like:

Answers

If you don’t want the buttons to change in height, then give them a height. Also give the img a height to keep it from being bigger than the button.
Finally set the img vertical-align to center to center the text vertically with the image.

Hopefully this gets you close and you can tweak padding’s and sizes to your liking.

See the EDIT comments in the code snippet to see the edit details.

.navbar{
    display: flex;
    padding: 2em;
}

.smallbutton{
    display:flex ;
    background-color: #959595;
}

.smallbutton button{
    min-width: 158px;
    display: block;
    /* EDIT Padding was keeping img and text away from ends */
    /* padding-right: 40px;
    padding-left: 40px; */

    /* EDIT You didn't give anything a height */
    height: 2.8em;

    /* EDIT Don't need the padding now */
    /* padding-bottom: 14px ;
    padding-top: 14px; */

    text-decoration: none;
    color: #2B2A2A;
    border-radius: 25px;
    border-color: #959595;

    /* EDIT To closer match your screen shot */
    font-size: 1rem;
}

/* EDIT Add */
.smallbutton img {
  height: 80%;             /* Contain image height with some space */
  vertical-align: middle;  /* Center's text with text */
}

        <div class="navbar">
          <div class="smallbutton">
            <button class="cob">
              <!-- EDIT Image path for demo -->
              <!-- <img src="static/img/calend 1.png" alt=""> -->
              <img src="https://placebear.com/64/64.jpg" alt="">
              События
            </button>
            <button>
              <img src="https://placebear.com/65/64.jpg" alt="">
              Купить R$
            </button>
            <button>
              <img src="https://placebear.com/66/64.jpg" alt="">
              Лотерея
            </button>
            <button>
              <img src="https://placebear.com/67/64.jpg" alt="">
              Бонусы
            </button>
            <button>
              <img src="https://placebear.com/68/64.jpg" alt="">
              Рефералка
            </button>
          </div>
        </div>

Is this what you’re after?

.navbar {
  display: flex;
  padding: 2em;
}

.smallbutton {
  display: flex;
  background-color: #060106;
  padding-bottom: 10px;
}

.smallbutton button {
  min-width: 158px;
  display: block;
  text-decoration: none;
  color: #2b2a2a;
  background: #959595;
  border-radius: 70px;
  padding-bottom: 2px;
  cursor: pointer;
  margin-right: 7px;
}

.smallbutton img {
  float: left;
  position: relative;
  left: 4px;
  max-width: 37px;
}

.smallbutton a {
  text-decoration: none;
}

.smallbutton span {
  font-weight: bolder;
  line-height: 35px;
  font-size: 19px;
}

<div class="navbar">
  <div class="smallbutton">
    <a href="#">
    <button class="cob"><img src="https://i.sstatic.net/TnepabJj.png" alt="Calendar"><span>События</span></button></a>
    <a href="#"><button><img src="https://i.sstatic.net/LRzPOFqd.png" alt="hexa"><span>Купить R$</span></button></a>
    <a href="#"><button><img src="https://i.sstatic.net/LRTBTnld.png" alt="present"><span>Лотерея</span></button></a>
    <a href="#"><button><img src="whatever.png" alt="whatever"><span>Бонусы</span></button></a>
    <a href="#"><button><img src="whatever.png" alt="whatever"><span>Рефералка</span></button></a>
  </div>
</div>

Images used:
, ,

Please signup or login to give your own answer.

Click here to cancel reply.

Html – The image stretches the button or goes beyond its frame

Answers