在网页html上，css只包含一个图像，适合图像到视口和水平和垂直中心

这是一个非常简单的一次性网页，所以内联CSS是任何东西都优先于正确/漂亮的CSS。用例非常简单：拍摄大图像（图像宽2100px，高3000px），并确保它总是调整到90％的视口大小，并且图像总是垂直和水平居中，无论视口大小如何。需要成为纯粹的HTML/CSS解决方案（无javascript/jquery）。该页面除了这些图像（包含在<a href>标签和链接到另一页面）中不包含其他内容。在网页html上，css只包含一个图像，适合图像到视口和水平和垂直中心

我一直在用各种各样的position:absolute，表格，div等等的变体，但似乎不能把东西放在一起，匹配我的用例。

来源

2017-07-07 AncientToaster

你能共享代码？ –

只需将它们的绝对位置设置为0，并将边距设置为自动。您可能需要在周围的链接（或通常最外层的内联元素）上设置它。没有任何问题，如果真的有必要，虽然不会推荐。

img { 
 
    max-width: 90vw; 
 
    max-height: 90vh; 
 
    
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    
 
    margin: auto; 
 
}

<img src="http://via.placeholder.com/2100x3000">

来源

2017-07-07 19:20:48 mvuajua

在网页html上，css只包含一个图像，适合图像到视口和水平和垂直中心

回答

相关问题