响应显示整个屏幕上的小图片

Question

我有一张像普通手机设备尺寸相同尺寸的图片（尺寸320px X 480px）。我想让显示器响应这张照片。 我想在移动设备中显示图片。 虽然，我想在桌面（以及其他大型）设备的中心显示图像

注意： 带有圆角的红色正方形在上面的屏幕截图中显示了图片。 黑色方块正在上面的屏幕截图中显示设备。

我的HTML在下面，（此HTML适用于移动设备。但这不适用于桌面）

    <table width="100%" border="0" align="center">
        <tr>
          <td align="center">
              <img src="images/picture.jpg" style="max-width:100%;width:100%;height:auto;" />
          </td>
        </tr>
    </table>

Answer 1

使用CSS media queries

@media only screen and (max-width: 539px) {
    table {
        width:100vw;
        height:100vh;
    }
}

您可以添加position:fixed或absolute

@media (max-width: 539px) {
        table {
            position:fixed;
            top:0;
            left:0;
            width:100vw;
            height:100vh;
        }
}