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

人像图像无法正确显示-太高

1 个答案: