Question

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

我的图像位于一个使用全窗宽的div下面。我正在使用margin-left: 30%，因此图片始终位于距左边界30％的位置。其他所有内容都设置为响应式图像处理..

我得到的代码是正确的，如果浏览器窗口调整大小，它会像我想要的那样缩放。 但是因为图像没有居中，所以缩放“发生得太晚”，因此正确的部分将隐藏在视图之外。

我可以通过“更早”的缩放来解决这个问题吗？或者使用与左边距离不同的东西：30％或左边：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。这样可以防止图像进入体外并被切断。

.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

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

1 个答案: