我有一个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 对于较大的示例图片,加载时间可能较长,请见谅。