I want to show an image centered in window (horizontally & vertically). If the image is too large, I want to scale it down to fit (no scrollbars).
我想以窗口为中心(水平和垂直)显示图像。如果图像太大,我想缩小它以适应(没有滚动条)。
Here is a live demo - try resizing the window. The image scales to fit but is not vertically centered.
这是一个现场演示 - 尝试调整窗口大小。图像缩放以适合但不垂直居中。
I am trying to use CSS table/table-cell, but this breaks max-height set on the image. If you uncomment the table/table-cell, the image will extend beyond bottom of window.
我正在尝试使用CSS table / table-cell,但这会破坏图像上设置的max-height。如果取消注释表/表格单元格,图像将延伸到窗口底部。
Is it possible to have both? I've found similar questions but not this exact setup.
这两个都有可能吗?我发现了类似的问题但不是这个确切的设置。
1 个解决方案
#1
0
I used vh and vw to capture the viewport dimensions. Is this sort of what you want?
我使用vh和vw来捕获视口尺寸。这是你想要的吗?
#1
0
I used vh and vw to capture the viewport dimensions. Is this sort of what you want?
我使用vh和vw来捕获视口尺寸。这是你想要的吗?