不居中时图像缩放“为时已晚”（在窗口调整大小时）答案

【问题标题】：Image-Scaling "too late" when not centered (on windows-resize)不居中时图像缩放“为时已晚”（在窗口调整大小时）
【发布时间】：2014-02-22 20:21:55
【问题描述】：

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

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

我得到了正确的代码，如果浏览器窗口被调整大小，它会像我想要的那样缩放。 但由于图像未居中，缩放“来不及”，因此右侧部分将隐藏在视图之外。

我可以通过“更早”开始缩放来解决这个问题吗？或者使用不同于 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%;
}

【问题讨论】：

标签： css image-scaling window-resize

【解决方案1】：

您可以使用margin-left: 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);
}

DEMO

【讨论】：

谢谢。这行得通。但这样一来，我就不再让图像垂直居中了。提示？
这可行，但似乎有点矫枉过正：use margin-left in container
我发现，这也解决了问题，但是因为我想设置 css 阴影，所以效果不够好：padding-left in img-class。优点是，它不需要容器 div。另外，我需要它与所有浏览器兼容；）-对此不确定。
您可以在原始代码中使用 margin-left: 15% 而不是 30%。由于您使用的是max-width: 85%，因此 85 + 15 将使您的总最大宽度为 100%。
如果我理解正确，那将无济于事，因为我需要图像的左边框与左边框精确到 30%（以及右边框，以便它始终是窗户里面一点点）。另外，我喜欢你的例子，但你知道如何让垂直对齐居中吗？目前我使用我的 2nd-comment 选项，但它充满了我担心的不必要的 css :-/ 我最喜欢我的第三个示例，但找不到解决填充区域中 css-shadow 问题的方法.