Question

此刻我有一个相当讨厌的问题。我在这里尝试了很多线程，无论图像的大小如何，都要将图像网格设置为相同的大小。但它不起作用，它让我发疯。

我得到的结果如下：

我的HTML看起来像这样：

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);
        });

JavaScript：

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

和CSS：

for (var i = 0; i < response.results.length; i++){
  var current = response.results[i];
  var myArray = [current.tracker_id, current.conversion, current.click, current.goal, current.approved, current.rejected, current.tracker,current.conversion_rate];
  sheet.appendRow(myArray);
}

也许这与我将JS中的图像设置为#movieDiv的事实有关？我是新手，所以我真的没有经验。但是如何使图像大小相同？

谢谢！

Answer 1

要解决hight的问题你可以简单地将整个内容包装在div中并将显示设置为flex，它会自动将子div设置为相同的高度，而不是内部内容的大小，以及然后在那些div中你可以放置你的图像

.container{
display:flex;
}

这是一个codepen链接

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

CSS - 无论图像大小与原始大小相同，都无法使图像大小相同？

1 个答案: