Html Question posted in
Some basic documentation can be found here.

Html – Image width issue in css

I have 3 images which should appear in a row side by side. Howevver the first image is big and it pushes the other two images to next row which I don’t want. I have made a class and added height and width but its not working

HTML code:

<div className="workImgs">
            <a href="https://github.com/aditya803/Flappy_Bird" target="_blank"><img src={FlappyBird} alt="" className="workImg" /></a>
            <a href="https://github.com/aditya803/flutter_firebase" target="_blank"><img src={BrewCrew} alt="" className="workImg" /></a>
            <a href="https://github.com/aditya803/news_app" target="_blank"><img src={NewsApp} alt="" className="workImg" /></a>
        </div>


CSS code:
.workImgs{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100vw;
    max-width: 100rem;    
}

.workImg{
    object-fit: cover;
    height: 20rem;
    margin: 0.5rem;
}

This is the result UI. I want the first img width to be equal to rest 2 so that they can be in 1 row. Have tried creating diff id for big img but didn’t work.
enter image description here

Tags:

2

Answers


  1. 0

    Try to remove flex-wrap: wrap; from .workImgs selector
    The Images should appear in a row

    Login or Signup to reply.
  2. 0

    Simply give the images a width of 100% and remove the flex-wrap to prevent wrapping, which will force the a elements to their maximum size, and they won’t be larger because the images take the maximum width.

    .workImgs{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.workImg{
    object-fit: cover;
    margin: 0.5rem;
    width: 100%;
    height: auto;
}
    <div class="workImgs">
  <a href="https://github.com/aditya803/Flappy_Bird" target="_blank"><img src="http://www.placehold.it/2000x200" alt="" class="workImg" /></a>
  <a href="https://github.com/aditya803/flutter_firebase" target="_blank"><img src="http://www.placehold.it/2000x200" alt="" class="workImg" /></a>
  <a href="https://github.com/aditya803/news_app" target="_blank"><img src="http://www.placehold.it/2000x200" alt="" class="workImg" /></a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search