Kevin Powell - Community•9mo ago

Image dimensions not matching p

I randomly downloaded these images from the web and i made 3 cards in a grid. When i rendered it the images came out so misshapen and i dont understand why, and this always happens. Here is the html and css, i have also started using bootstrap so idk if thats part of the problem.

<div class="productsContainer">
        <div class="card my-5">
                    
            <img src="./images/burg.jpg" alt="Burger" class="card-img-top my-1 img-fit">
            <div class="card-body">
                <h5 class="card-title">Burger</h5>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente soluta quo blandi</p>

            </div>
        
        </div>
        
        <div class="card my-5" >
                    
            <img src="./images/past.jpg" alt="Pasta" class="card-img-top my-2 img-fit">
        <div class="card-body">
            <h5 class="card-title">Pasta</h5>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente soluta quo blandi</p>

        </div>
        </div>        
    <div style="background-color: rgb(166, 15, 172);"class="productsItems">test4</div>

    </div>

<div class="productsContainer">
        <div class="card my-5">
                    
            <img src="./images/burg.jpg" alt="Burger" class="card-img-top my-1 img-fit">
            <div class="card-body">
                <h5 class="card-title">Burger</h5>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente soluta quo blandi</p>

            </div>
        
        </div>
        
        <div class="card my-5" >
                    
            <img src="./images/past.jpg" alt="Pasta" class="card-img-top my-2 img-fit">
        <div class="card-body">
            <h5 class="card-title">Pasta</h5>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente soluta quo blandi</p>

        </div>
        </div>        
    <div style="background-color: rgb(166, 15, 172);"class="productsItems">test4</div>

    </div>

.productsContainer{
    display: grid;
    grid-template-columns: auto auto auto;
    outline: 2px solid black;
    padding: 10em;
    border: 3px solid red;
}
.productsItems{
    padding: 5em;
    margin: 3px;
}
@media screen and (min-width:481px)and (max-width:781px){
    .productsContainer{
        display: grid;
        grid-template-columns: auto auto auto;
        outline: 2px solid black;
        padding: 10em;
        border: 3px solid red;
    }
    .productsItems{
        padding: 5em;
        margin: 3px;
    }
}

.productsContainer{
    display: grid;
    grid-template-columns: auto auto auto;
    outline: 2px solid black;
    padding: 10em;
    border: 3px solid red;
}
.productsItems{
    padding: 5em;
    margin: 3px;
}
@media screen and (min-width:481px)and (max-width:781px){
    .productsContainer{
        display: grid;
        grid-template-columns: auto auto auto;
        outline: 2px solid black;
        padding: 10em;
        border: 3px solid red;
    }
    .productsItems{
        padding: 5em;
        margin: 3px;
    }
}

also for some reason my media queries for responsiveness are not working as expected, any advice?

7 Replies

Tok124 (CSS Nerd)•9mo ago

first of all. change grid-template-columns: auto auto auto; to grid-template-columns: repeat(3, 1fr); Set the images to

display:block;
width:100%;
aspect-ratio:16/9;
object-fit:cover;

display:block;
width:100%;
aspect-ratio:16/9;
object-fit:cover;

greenleaf02OP•9mo ago

thank you so much, let me give it a go🤝

greenleaf02OP•9mo ago

you're a legend bro, it worked✨ if you dont mind me asking, im still a beginner rn, i only stated my from end journey like 2 months or so ago...how did you know that was the solution to the problem? In general how do you know how to solve a problem that you encounter?

greenleaf02OP•9mo ago

Tok124 (CSS Nerd)•9mo ago

I have just used CSS for a very long time. I write CSS for several hours every day and i've done this for the last 15 years or so. But i just know how grid works, the 1fr is kinda like flex:1; in flexbox. Each grid item will take 1fr size, so that means 1 fraction. So they all take the same width. And i have just learned about the other properties from reading on MDN and from forums and other stuff. I have also learned a couple of things from Kevins videos which i highly recommend you to watch more of if you have just got started with this. But i guess the reason i know this particular problem is because i have done card layouts myself in the past. And often with images of different sizes. So i have had the same problem myself 🙂

greenleaf02OP•9mo ago

i understand, thanks again for you assistance, it has been highly appreciated💯

Tok124 (CSS Nerd)•9mo ago

No problem 🙂 Btw, i strongly recommend you to learn a lot about devtools. SUre ion this case maybe it would not had helped so much because you probably didnt know about properties such as the aspect-ratio property or the object-fit property and stuff. But the devtools is how you solve your problems when you run in to problems. So you can see in devtools what the problem is. Then you just need to know how to actually solve it. But you will learn this with time 🙂

Gaming

Programming

Image dimensions not matching p