[SOLVED] Images having different sizes despite same attributes


This Content is from Stack Overflow. Question asked by KRiPT

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


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


.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%;


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.

This Question was asked in StackOverflow by KRiPT and Answered by dqhendricks It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?