肖像图像显示不正确 - 太高了

Question

我的网站上有几个动态灯箱画廊（这是我们当前网站的改版，还没有现场）。一切正常，但出于某种原因，我不能为我的生活找出原因，我的肖像图像与画廊中的其他图像相比非常高。这似乎更糟糕的是非常狭窄的图像。任何有关这方面的帮助将非常感激。

我试图硬编码高度和宽度，并试图在CSS中创建一个特殊的类。我没有尝试过任何工作。我正在使用Lokesh Dhakar的lightbox2。我和他联系过这个问题，他说这是一个css的事情，并建议我在这里发帖求助。我确实有我认为可接受的肖像图像和不可接受的肖像图像的截图。

这是我描述的部分的基本html：

<div class="gallery1">

<a href="Halloween On The Farm 10-19-08/Photo10.jpg" data-lightbox="halloween1" data-title="5th Grade Volunteers"> <img src="Halloween On The Farm 10-19-08/Photo10.jpg" alt="5th Grade Volunteers" width="185" height="155"></a>

<a href="Halloween On The Farm 10-19-08/Photo11.jpg" data-lightbox="halloween1" data-title="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"> <img src="Halloween On The Farm 10-19-08/Thumbnails/Thumb11.jpg" alt="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"></a>

<a href="Halloween On The Farm 10-19-08/Photo12.jpg" data-lightbox="halloween1" data-title="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"> <img src="Halloween On The Farm 10-19-08/Thumbnails/Thumb12.jpg" alt="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"></a>

这是css：

.gallery1 {
    display: block;
    border-radius: 25px 25px 25px 25px;
    padding: 10px;

}

.gallery1 img {

    border-radius: 25px 25px 25px 25px;
    padding: 15px;
    width: 200px;
    transition: 1.0s;
    cursor: pointer;
}

.gallery1 img:hover
{

     transform: scale(1.1);
}

预期的结果是图像将正确显示并且不会比预期的大得多。到目前为止，我的实际结果并没有成功。

Answer 1

这应该做的工作（它只与图像而不是背景图像background-size: contain相同）：

.gallery1 {
    object-fit: contain;
}

编辑：关于所需结果的问题尚不清楚。 通过为图像本身设置高度来解决实际案例：

.gallery1 {
    display: block;
    width: 100%;
    border-radius: 25px 25px 25px 25px;
    padding: 10px;
}

.gallery1 img {
    border-radius: 25px 25px 25px 25px;
    padding: 15px;
    max-width: 100%;
    height: 200px; /* max-height: 200px; */
    transition: 1.0s;
    cursor: pointer;
}