Images having different sizes despite same attributes-CodePudding

So I am creating this responsive website, and the images were fine at first, but then I started working on other parts of the site and when I come back to the main page the first 2 images are small and the 3rd image is the correct size. I am not quite sure what happened. I used inspect element and the only attributes applied to the images are the ones mentioned below except the .left one. What seems to be the problem? Worth mentioning that if I increase the width (now at 70%) all of the images grow at the same rate. The image size also comes back to normal as soon as I change the text of the image below. It seems that longer text makes the image grow bigger and vice versa.

Thank you in advance for the help and

HTML

<div >
    <div>
        <a href="Bushido.html"><img src="img/main-page/444.jpg"/></a>
        <p>J-Cole: KOD</p>
        <button ><a href="stock.html">Check out </a></button>
      </div>
    <div>
        <a href="Bushido.html"><img src="img/main-page/444.jpg" /></a>
        <p>Jay-Z: 444</p>
        <button ><a href="stock.html">Check out </a></button>
      </div>
      <div>
        <a href="Bushido.html"><img src="img/main-page/hus.jpg" /></a>
        <p>J-Hus: Big Conspiracy</p>
        <button ><a href="stock.html">Check out </a></button>
      </div>
</div>

CSS

.hottest {
  display: flex;
  justify-content: space-between;
  color: white;
  margin: 3vw;
  margin-bottom: 10vw;
  width: 100%;
}
.hottest p {
  padding-left: 1vw;
  margin: 1vw;
  font-size: 3vw;
}
.hottest .left {
  float: left;
  margin-right: 2vw;
}
.hottest a {
  text-decoration: none;
  color: black;
}

.hottest img {
  width: 70%;
}

CodePudding user response：

the image width is 70% of it parent width, and the text makes the parent width bigger because you are using flex. flex makes the div width only as big as the content.

try giving your divs flex-basis: 100%; which should give your divs equal widths.

CodePudding user response：

The text

text

would enlargen your parent div container. If you set the divs to a specific width and height, does the problem still occur?