CODEWITHSUNDEEP
javascripthtmlcss
Jens O. Anders Olsén
Jens O. Anders Olsén

Reputation: 374

CSS - Can't make images same size no matter what size they originally have?

I have a rather annoying problem at the moment. I have tried numerous threads in here on how to set a grid of images to the same size no matter what size the image has to begin with. But it doesn't work and it's driving me crazy.

The results I'm getting looks like this: The images is different in size and thus messes up the look

My HTML looks like this:

<div class="container">
        <div class="jumbotron">
            <h3 class="text-center">Search Movie!</h3>
            <form id="searchForm">
                <input type="text" class="form-control" id="searchText" placeholder="Search for any movie...">
            </form>
        </div>
    </div>

JavaScript: 

function getMovies(movieSearched) {
    axios.get('http://www.omdbapi.com?s='+movieSearched+'&apikey='+myKey).then((response) => {

        movies = response.data.Search;
        var output = ``;

        $.each(movies, (index, movie) => {
            output+= `
                <div class="col-md-4">
                    <div class="box">
                        <img src="${movie.Poster}" height="250">
                        <h5>${movie.Title}</h5>
                        <a onclick="movieSelected('${movie.imdbID}')" class="btn btn-primary" href="#">Movie Details</a>
                    </div>
                </div>
            `;

            $('#movies').html(output);
        });

and CSS: 

.box {
    padding: 5px; 
    text-align: center;
    overflow: hidden;
}

.box img {
    margin-bottom: 30px;
    display: grid;
    width: 100%;
    height: 250px; 
    object-fit: scale-down;
    object-position: center;

}

#movieDiv {
    display: grid;       
}

#movies img, #movie img {
    width: 100%;
    height: 100%;
}

Maybe it has to do with the fact that I'm setting the images from the JS to the #movieDiv? Im new to this so I'm not really experienced. But how do I make the images the same size?

Thanks!

Upvotes: 0

Views: 845

Answers (1)

Abslen Char
Abslen Char

Reputation: 3135

to fix the issue with the hight you can simply wrap your whole content inside a div and set the display to flex , it will automatically set the child div to the same hight no mater the size of the content inside of them , and then inside those div you can put your images

.container{
display:flex;
}

here is a codepen link

https://codepen.io/anon/pen/dmWQgm

Upvotes: 2

Related Questions