如何在响应式站点上停止图像缩小同时保持居中

Question

这是我的第一篇文章，所以请温柔。我已经彻底寻找答案但没有运气 - 我敢肯定它一定很简单，但我的想法已经用完了......无论如何：

我正在制作一个响应式网站，但我想保持一个固定大小的图像。我花了很长时间才弄清楚如何做到这一点（通过删除“最大宽度：100%”），但是这产生了改变其对齐方式的奇怪效果，因此它不再以页面为中心。

我怎样才能两者兼得？居中和固定大小？

非常感谢任何帮助。

哦，这就是我现在的图像 css 的样子：

img {
height: auto;
min-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
}

感谢您迄今为止的所有帮助 - 尽管恐怕这还远未解决。我想我会按照你们中的一些人的建议完整地展示我的代码，所以我把它放到了 jsfiddle 中。但是它在那里工作得非常好 - 窗口可以调整大小，图像仍然保留它的完整尺寸并且仍然保留在页面的中心。然而，使用完全相同的代码，当我将“索引”页面从我的 PC 加载到 Chrome 中时，底部的图像要么保持其大小，但在窗口缩小时向右漂移，或者它保持在中心但缩小到一个荒谬的大小。知道为什么会有这样的差异吗？

这是我的 jsfiddle，可能有一些线索：

http://jsfiddle.net/eggwhite/0yz6ndjh/

再次感谢。

Answer 1

如果我理解正确，您想添加一个即使父元素的宽度小于图像的图像仍应居中。这可以通过使用非常宽的图像包装器 div 并相应地定位它来完成。此外，图像本身应该在该包装器中居中。

在下面的示例中，布局有两列，每列都有一个 300x300 像素的图像。如果您调整视口大小（使用“整页”查看模式），图像仍将居中（查看占位符图像中的“x”如何保持可见）。

html, body, .column {
    padding: 0;
    margin: 0;
}
.column {
    display: block;
    float: left;
    width: 50vw;
    height: 100vh;
    background-color: #ccf;
    overflow: hidden;
}
.column + .column {
    background-color: #ffc;
    float: right;
}
.img-wrapper {
    width: 10000px;
    margin-left: calc(-5000px + 50%);
    text-align: center;
}
.img-wrapper img {
    margin: 0 auto;
}

<div class="column">
    Column 1
    <div class="img-wrapper">
        <img src="http://placehold.it/300x300" />
    </div>
</div>
<div class="column">
    Column 2
    <div class="img-wrapper">
        <img src="http://placehold.it/300x300" />
    </div>
</div>

Answer 2

可以通过将图像包装在 <div> 中来完成，如下所示：

HTML：

<div>
    <img src="..." alt="random blue sky image" />
</div>

CSS：

div {
    width: 100%;
    text-align: center;
}
img {
    width: 250px; /* or whatever width you need the image to be */
}

这是代码的demo。

如果这没有帮助，我们会要求您向我们提供有问题的代码。 Jsfiddle.net 是一种简单的方法。