css - 未居中时图像缩放 "too late"(在窗口调整大小上)

Question

我没有找到这方面的任何信息。可能是因为我的方法不正确。

我将我的图像绝对定位在使用全窗口宽度的 div 下。我正在使用 margin-left: 30%，因此图像始终位于距左边框 30% 的位置。其他一切都设置为响应式图像处理..

我得到的代码是正确的，如果浏览器窗口调整大小，它会按我想要的方式缩放。但由于图像未居中，缩放发生“为时已晚”，因此右侧部分将隐藏在 View 之外。

我可以通过“更早”开始缩放来解决这个问题吗？或者使用不同于 margin-left: 30% 或 left: 30% 的东西？

请看这里:JsFiddle - Image out of view when resizing window

img.aaa
{
    position: absolute;
    max-width: 85%;
    max-height: 85%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: 30%;
}

Answer 1

您可以使用 margin-left: auto 将图像居中。如果一定要离左边一定距离，就用一个容器div和下面的css。这将防止图像离开 body 并被切断。

.container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-left: 30%;
    //text-align: center; //remove padding and uncomment this to center image in div
}
img.aaa {
    max-width: 100%;
    max-height: 85%;
    box-shadow: 0 5px 10px rgba(0,0,0,0.8);
}

DEMO