Css 未居中时图像缩放“太晚”（在窗口调整大小时）

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

我把我的图像完全放在一个使用全窗口宽度的div下面。 我使用的是左边距：30%，这样图像的位置总是离左边框30%。 其他一切都已设置为响应图像处理

我得到了正确的代码，如果浏览器窗口被调整大小，它可以像我想要的那样缩放。 但由于图像未居中，缩放发生得太晚，因此右侧部分将隐藏在视图外

我可以通过提前开始缩放来解决这个问题吗？ 或者使用不同于左边30%或左边30%的东西

请看这里：

您可以使用marginleft:auto使图像居中。如果必须与左侧保持一定距离，请使用容器div和以下css。这将防止图像进入身体外部并被切断

.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);
}

---

谢谢这很有效。但是那样的话，我就不会让图像垂直居中了。提示？这是可行的，但似乎有些过分：我发现，这也解决了问题，但由于我想设置css阴影，它还不够好：。优点是，它不需要container-div。另外，我需要它与所有浏览器兼容；-不确定。您可以使用左边距：15%，而不是原始代码中的30%。由于您使用的最大宽度为85%，85+15将使您的总最大宽度为100%。如果我理解正确，这对我没有帮助，因为我需要图像的左边框与左边框和右边框的准确距离为30%，以便它始终位于窗口内一点。另外，我喜欢你的例子，但是你有没有办法让垂直对齐以它为中心？目前我使用我的第二个注释选项，但它充满了不必要的css，我担心：-/我最喜欢我的第三个示例，但找不到解决填充区域中css阴影问题的方法。

.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);
}