Question

在我的网站上，当您点击我的某个项目时，会打开一个灯箱，中间是一个包含两个div的容器div。一个是顶部有几个项目的图片，下面是一个白色div中的文本，即使它没有满，也会到达页面的底部。

HTML组织：

<div id="project_container">
    <div id="project_large12" class="project_large">
        <p> pictures with vertical scrolling</p>
    </div>
    <div id="project_text">
        <p class="project_description12"> Project description text
        </p>
    </div>
</div>

（在实际代码中，有几个'project_largeXX'divs和'project_descriptionXX'divs，我分别用JS代码隐藏。）

处理它的CSS：

#project_container
{
    position : fixed;
    top : 0;
    left: 50%;
    margin-left: -30%;
    margin-top: 5%;
    width : 57.45%;
    height : 64.5%;
    background-color : #FFF000
}

.project_large
{
    position : absolute;
    width: 100%;
    line-height : 1.2;
    overflow : auto;
    height : 616px;
}

#project_text
{
    position : fixed;
    width: calc(57.2% - 40px);
    padding : 20px;
    height: 100%;
    text-align : justify;
    margin-top : 33%;           
    background-color : whitesmoke;
}

#project_text p
{
    margin : auto;
    font-family : 'Dosis', sans-serif;
    font-size : 1.2em;
    text-align : justify;
    bottom: 0;
    line-height: 1;
}

我需要做的是，无论窗口的宽度或高度如何，只需保持包含图像的div的比例溢出。

Here是运行该东西的代码片段。

我拼命想要做的就是让黄色的div保持一定的比例 - ＆gt;第一张图片中的一张，或靠近它，让第二张图片出现。如果在JSfiddle上更改“结果”窗口的宽度或高度，您可以看到黄色div在某些情况下仅连接项目描述div的顶部。随着图片的溢出，调整大小或甚至具有不同的分辨率，图像div会在项目描述div下面增长，从而搞砸了scolling ......

我的网站如果您想查看：www.vincentleroux.fr

我再次达到了编码基础知识的极限。我知道我的代码是脏的，好吧，让我们说肮脏，所以也许有一个解决方案，我用HTML来安排我的div。

Answer 1

我迫切想要做的就是让黄色的div保持一定的比例 - ＆gt;第一张图片中的一张，或接近它，让第二张图片出现。

如果我正确理解这一点，你应该可以通过设置最小高度/宽度来实现这一点：

    min-width: XXpx;
    min-height: XXpx;

这样，无论窗口有多小，div都不会小于你设置的最小尺寸。如果窗口对于div太小，它将添加滚动条。

您可能希望在container元素上设置最小高度/宽度，因为这应该让两个div相应地缩放。如果您只希望黄色div保持此比例，只需在该类下添加这些属性。

希望这有帮助！

调整大小后div的比例，其中包含溢出的图像内容

1 个答案: