2

我有一个 3 级结构：

<div class="workingArea">
 <div class="imageContainer">
  <img class="theImage" />
 </div>
</div>

“workingArea”大小由浏览器的大小决定（在父级中使用 flex）。“imageContainer”大小由加载图像的大小决定（取决于图像，每个图像都有不同的大小）。

我想将图像容器放在工作区域的中心。

有一个问题：因为“imageContainer”的大小是由图像决定的，它可以大于工作区域的大小，在这种情况下，我希望图像的中心位于图像的中心工作区域（图像应该向左和向右溢出）。

我试过使用 flex，但它只能垂直居中，不能垂直和水平居中。

JSFiddle 中的问题模拟

谢谢！

4

3 回答 3

0

最简单的解决方案是将您的图像用作背景图像并将其定位为中心。即使我完全是为了好的和语义的代码，如果我是你，我会这样做。这种方式意味着您不需要 imageContainers 或任何东西。代码将如下所示：

<div class="working_area" style="background: yellow url('http://eofdreams.com/data_images/dreams/bear/bear-05.jpg') center center no-repeat"></div>

如果需要能够动态改变图像，可以使用原生 JS 或 jQuery 来操作“工作区”。

此解决方案的主要缺点是您不能在浏览器中使用图像作为图像。所以没有“另存为”或“复制链接”：C

于 2013-08-20T06:50:31.517 回答
0

解决了

.working_area {
background-color: yellow;
background:yellow;
width:100%;
overflow:hidden;
display:table;
}

.image_container {
background:red;
display:table-cell;
position:relative;
text-align:center;

}

示例 ::工作正常

于 2013-08-20T07:14:16.660 回答
0

我认为您的防弹解决方案将是这样的：

.workingArea {
    display: table;
}
.imageContainer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}
.imageContainer img {
    max-width: 100%;
    height: auto;
}

这是演示：http: //jsfiddle.net/JFrCq/30/

于 2013-08-20T08:33:03.997 回答