图像缩放“太晚”，当不居中（在Windows调整大小）

我没有找到关于此的任何信息。可能是因为我的方法不正确。图像缩放“太晚”，当不居中（在Windows调整大小）

我让我的图像完全位于使用完整窗口宽度的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%; 
}

来源

2014-02-22 JuliaWatanabe

您可以使用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

来源

2014-02-22 20:34:45 brouxhaha

感谢。这工作。但这样，我不再让图像垂直居中。一个提示？ – JuliaWatanabe

这工作，但似乎是矫枉过正：[在容器中使用余量]（http://jsfiddle.net/sYv9r/7/） – JuliaWatanabe

而我发现，这也有点解决了这个问题，但因为我想设置css阴影，它工作不够好：[填充 - 在img-class中留下]（http://jsfiddle.net/sYv9r/8/）。好处是，它不需要容器div。此外，我需要这与所有浏览器兼容;） - 不确定。 – JuliaWatanabe

图像缩放“太晚”，当不居中（在Windows调整大小）

回答

相关问题