Question

我有一个CSS表，其中div显示一行中有两个单元格。每个单元格都有一个大图像。该表应该是完整的窗口大小。

我希望将大图像缩小到与用户窗口的尺寸并排放置，无论分辨率如何。目前，图像处于全尺寸，即使我直接用高度定位它们也不会缩小：100％宽度：自动和最大高度：100％最大宽度：自动。

非常感谢能够提供帮助或指出显而易见的人。

HTML：

<div class="parent">
    <div class="left"><img src="http://wallpaperstate.org/wp-content/gallery/ca_home/rainbow-colors-wallpaper-wallpapers-28469135-2560-1600.jpg"/></div>
    <div class="right"><img src="http://wallpaperstate.org/wp-content/gallery/ca_home/new-2013-high-quality-abstract-wallpaper.jpg"/></div>
</div>

CSS：

html, body {
    width: 100%;
    height: 100%;
}

.parent{
    display: table;
    height: 100%;
    width: auto;
}

.parent > div{
    display: table-cell;
    height: 100%;
    width: auto;
}

.parent > .right {
    height: 100%;
    width: auto;
}

img {
    width: auto;
    height: 100%;
    max-height: 100%;
    max-width: auto;
}

这是JSFiddle

P.s为大型示例图像的加载时间道歉。

Answer 1

编辑：它只是关于高度所以内联块或浮动将是有效的：

html, body, .parent {
    height: 100%;
    margin:0;
}
.parent {
    white-space : nowrap;
}
.parent > div {
    display:inline-block;
    height: 100%;
    vertical-align:top;
    ;
}
img {
    height: 100%;
    max-height: 100%;
}

参见http://jsfiddle.net/53ySr/6/ 请注意，最简单的是http://codepen.io/gc-nomade/pen/vGhbf（没有div.right也不是div.left）

对于那些好奇的人来说，这是第一个在窗口宽度范围内缩小的版本：使用display：table，你需要table-layout来控制宽度，这有帮助。见http://jsfiddle.net/53ySr/2/ jsfiddle.net/53ySr/3/

html, body {
    width: 100%;
    height: 100%;
}

.parent{
    display: table;
    height: 100%;
    table-layout:fixed;
    width: 100%;
}

.parent > div{
    display: table-cell;
    height: 100%;
    width: 50%;
    background:#233C40;
}
img {
    width:  100%;
    height:100%;/* you can remove this */
    max-height: 100%;
}

Answer 2

只需对你的css进行以下编辑，它就可以了。

html, body {
    width: 100%;
    height: 100%;
}

.parent{
    display: table;
    height: 100%;
    width: inherit;
}

.parent > div{
    display: table-cell;
    height: 100%;
    width: 50%;
}

.parent > .right {
    height: 100%;
    width: 50%;
}

.parent > .left {
    height: 100%;
    width: 50%;
}

img {
    width: 100%;
    height: 100%;
}

小提琴在这里http://jsfiddle.net/bvbHF/

如何将灵活的表格单元格中的图像缩小到窗口的尺寸？

2 个答案: