Question

在这个项目中，我的身体里面有一个大的div（也是主要的，只是出于css原因），它包含8个较小的div（四列并排）。 div通过display:inline-block;并排排列。大div具有100％宽度，较小的div具有不同的宽度并且应该自动填充这些100％的父div。四列中的两列由一个高度为div的部分组成：100％;两列分别保持两个div，每个div的高度为50％。

我真的被困在如何让这四个div具有单独的宽度（以便它们保持内部图像的视觉比例）。

页面永远不可滚动，所有内容应始终可见。

我为图像找到了类似这种行为的东西，但我无法使用div＃wrapper。（Responsive Image full screen and centered - maintain aspect ratio, not exceed window）

这是指向jsfiddle的链接：http://jsfiddle.net/hLzoxmyb/7/

这是我的HTML代码：

<main>
    <div id="wrapper">
        <div id="one">
            <figure id="one">
                <img src="01.png" alt="01">
            </figure>
        </div>
           <div id="two">
            <figure id="02">
                <img src="02.png" alt="02">
            </figure>
            <figure id="03">
              <a href="03.html"><img src="03.png" alt="03"></a>
            </figure>
        </div>
           <div id="three">
            <figure id="04">
              <a href="04.html"><img src="04.png" alt="04"></a>
            </figure>
            <figure id="05">
              <a href="05.html"><img src="05.png" alt="05"></a>
            </figure>
        </div>
           <div id="four">
            <figure id="06">
              <a href="06.html"><img src="06.png" alt="06"></a>
            </figure>
        </div>
    </div>
</main>

这里是CSS代码：

body {
    background-color:#cccccc;
    font-family: monospace;
    font-size:120%;
    margin:0;
    padding:0;
}

div#one figure, div#four figure {
    height:80%;
    height:80vh;
}

div#two figure, div#three figure {
    height:40%;
    height:40vh;
}

figure {
    margin:0;
    padding:0;
}

div#wrapper {
    margin:0 auto;
    padding-bottom:10%;
    padding-bottom:10vh;
    padding-top:10%;
    padding-top:10vh;
    white-space:nowrap;
    width:80%;
}

div#wrapper div {
    display:inline-block;
    width:25%;
}

div#wrapper div figure img, div#wrapper div figure a img {
    height:100%;
    width:100%;
}

Answer 1

这个jsfiddle正是我所要求的。 http://jsfiddle.net/hLzoxmyb/10/

可能有帮助的事情是：

vertical-align:middle;

和

position:relative;
top:50%;
transform:translate(-50%,-50%);

如果有任何需要改进的地方，也许有人可以请检查。

也许有人可以更深入地解释一下。说实话，我通过反复试验弄明白了......

这些问题/答案有所帮助：

Vertically align an image inside a div with responsive height

How to vertically align an image inside div

编辑1：跨浏览器兼容性可能是一个问题，它似乎适用于Chrome和Safari。

编辑2：与Chrome和Safari相比，Firefox正在解释和做一些不同的事情。

编辑3：在Firefox div中，＃wrapper不居中。您可以使用以下CSS将div居中。

@-moz-document url-prefix() {
    main {
        text-align:center;
    }
}

在div内部缩放四列＃wrapper比例（保持纵横比）响应视口

1 个答案: