html - 用图像缩放整个表格

Question

我正在制作这个响应式网页:http://jsfiddle.net/GeDxr/174/

我需要屏幕中的图像是分开的，所以我将它们放在一个表中。问题是，表格在调整大小时搞砸了。有没有办法让“屏幕”保持由这些不同部分组成的整洁图像？

单元格 css 中的当前表格/图像:

    table {
    width: 100%;
    background-color: #00BF6E;
    min-height: 100%;
}

img {
    width: auto;
    height: auto;
}

谢谢!

Answer 1

您的图片有最小高度。我在以下代码中为您注释掉了这一点:

.css-mb .mb-screen img {
  width: 100%;
  /* min-height: 100%; <-- remove this */
  position: center;
}

如果您指定最小宽度和最小高度，图像将因为宽高比发生变化而变形(它们都填充了 100% 的可用空间)。仅使用最小宽度可确保比例保持不变。