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

Question

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

3

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

我希望将大图片缩小以便在用户窗口的尺寸内并排显示，无论其分辨率如何。目前，这些图片的大小是它们的全尺寸，并且即使我直接使用height:100%、width:auto和max-height:100%、max-width:auto来设置它们的大小，它们也不会缩小。

非常感谢能够帮忙或指出明显错误的任何人。

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（一个在线代码编辑器）：http://jsfiddle.net/liam14000/53ySr/。

P.S 对于较大的示例图片，加载时间可能较长，请见谅。

- Liam88

所以您希望图像在高度和宽度上都适合用户窗口？ - JTN

啊，抱歉。只有高度！宽度不重要。而且图像的比例不均匀，所以高度已经更大了。我已经用正确尺寸的新图像更新了JSFiddle。http://jsfiddle.net/liam14000/53ySr/4/ @Jithin - Liam88

同时，当调整大小时，图像尺寸需要保持均匀和成比例。因此，我猜当窗口缩小时，从右侧会扩展一个间隙，以使宽度缩小。@Jithin - Liam88

2个回答

0

只需要对您的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/

- JTN

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- G-Cyrillus · Accepted Answer

编辑：这只涉及到高度，因此使用inline-block或float将更有效：

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