Question

我以为我已经解决了如何做到这一点，但我想我还没有管理它。我试图以最小的css实现这一点。

图像居中，如果您水平或对角调整窗口大小（强调水平），一切都很好。

但如果您只是垂直调整大小，图像大小将保持在其标称高度并添加滚动条。

我尝试过各种最大高度，最大宽度，高度和宽度的组合，但似乎都没有解决它。

我的图片将是各种尺寸，宽度最大1024px，高度最大768px;

我的努力可以在

看到

http://mclportal.net/AtLast/DeadCentre.html

＆＃13;

        #lightbox{
          background: lightblue;
          padding: 0px;
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%; 
        }
        
        #slide{
          background: #ffdb4c;
          /* height: 300px; */
          position: relative;
          top: 50%;
          
          -webkit-transform: translateY(-50%);
          -moz-transform:    translateY(-50%);
          -ms-transform:     translateY(-50%);
          -o-transform:      translateY(-50%);
          transform:         translateY(-50%);
        }
                
        img {
            max-width: 800px;
            max-height: 600px;

            display: block;
            margin: auto;
        }

Markup:

＆＃13;

    
    <body>
    <div id="lightbox">
      <div id="slide">    <img src="http://lorempixel.com/800/600/" id="myImg"/>
      </div>
    </div>

＆＃13;

我正在使用MAC Mountain Lion和最新的Firefox和Chrome进行测试

刚刚使用SAFARI进行测试，它在任何方向都没有响应!!

Answer 1

这些场景中棘手的部分是，您的最大宽度和高度必须是动态的，因为它们可以轻松适应不同的视口方向。如果交叉浏览器兼容性不是主要问题，则可以分别使用vmax和vmin单位进行图像最大尺寸测量，以便强制图像遵循视口边界，而不管视口方向如何。

此技巧仅在以下情况下有效：

可以使用浏览器对视口单元的支持 - 您可能必须考虑那些没有
#lightbox容器相对于视口大小具有尺寸（垂直和水平）。

#lightbox{
    background: lightblue;
    padding: 0px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%; 
}

#slide{
    background: #ffdb4c;
    /* height: 300px; */
    position: relative;
    top: 50%;
    
    -webkit-transform: translateY(-50%);
    -moz-transform:    translateY(-50%);
    -ms-transform:     translateY(-50%);
    -o-transform:      translateY(-50%);
    transform:         translateY(-50%);
}

img {
    max-width: 80vmax;
    max-height: 80vmin;
    display: block;
    margin: auto;
}

<div id="lightbox">
    <div id="slide"><img src="http://lorempixel.com/800/600/" id="myImg"/></div>
</div>

响应中心图像：垂直调整大小 - 不

1 个答案: