在较小的 div 中居中 img 未按预期工作

Question

我一直在努力解决这个问题，但即使在堆栈中也有这么多解决方案，我也找不到适合我需要的解决方案。

我想在它的 wrapper-div 中居中一个具有“溢出：隐藏”的 img，以便图像可以具有任何可能的宽度。问题是 wrapper-div 与另一个包含文本的高度相同的 div 对齐。

我已经尝试了绝对定位的解决方案，但是由于宽度和高度都没有设置为特定数量的像素，因此这不起作用并且图像将不再显示。

尝试使用 flexbox 也以一团糟而告终，我尝试过的所有其他方法都因其他原因而无法正常工作。

由于包含图像和文本的这部分是整个页面的一部分，它们依赖于很多其他的东西。所以我不必在这里发布整个代码我已经准备好了codepen。

<div id="event_wrapper">
    <div id ="event_imagewrapper">
        <img id="event_picture" src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg"/>
    </div>
    <div id="event_textbox">
        <h2>Event-title</h2>
        <div id="event_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
        <div>Continue...</div>
        <div id="event_date">01 APR</div>
    </div>
</div>

#event_wrapper 中的所有内容都可以操作，但条件如下：

1. image-wrapper 只能进入 event_wrapper 的中间（仅覆盖它的一半宽度）
2. 由于图片将由后端加载，因此无法使用 CSS 属性“background-image”
3. 图片大小可能不同
4. 如果页面被调整大小，文本应该是可读的，直到最后，图片可能有更多溢出（这会被隐藏......）
5. 一切都应尽可能保持动态，因此无法设置特定的高度和宽度
6. 解决方案应该是浏览器兼容的（旧版本的 IE 可能会被忽略...是的，我知道，变量在 IE 中不起作用，这只会在我没有完成设计的情况下使用！ :-))

以下图片将说明我的意思：

错误的图像定位：

正确的图像定位：

任何能帮助我解决这个问题的人将不胜感激。

我是不是在途中的某个地方犯了错误？是否甚至可以仅使用 CSS 来做到这一点？

编辑

我考虑过以下堆栈问题，它们可能会帮助您确定我的请求和问题：

Center a large image of unknown size inside a smaller div with overflow hidden

Aligning image to center inside a smaller div

Center an image in a div too small for it?

center oversized image in div

center a big image in smaller div

您会注意到这些解决方案要么在 img 上使用绝对定位，需要明确的高度或宽度，要么使用 flexbox，在我的情况下由于未知原因不起作用。

编辑 2

正如我在下面的回答中所述，我在之前的尝试中发现了 flexbox 无法使用Center a large image of unknown size inside a smaller div with overflow hidden 中给出的解决方案的原因： 那里的解决方案在图像上使用了“flex:none”，它没有对我的图片做任何事情，尤其是没有将它放在我的 imgs parent-div 中。

Answer 1

看看这是否有帮助fiddle

#event_imagewrapper {
    display: inline-block;
    position: relative;
    width: 49%;
    height: 100%;
    overflow: hidden;
    float: left;
    background: url(http://www.freedigitalphotos.net/images/img/homepage/87357.jpg);
    background-position: cover;
    background-repeat: no-repeat;
}

#event_picture {
    display: inline-block;
    width: auto;
    height: 100%;
    position: relative;
    visibility: hidden;
}

我已将图像用作imagewrapper 的背景，然后隐藏图像不显示：无，因此它的宽度和高度与之前的设置相同。

Answer 2

感谢 Abhitalks，我发现了我在使用 flexbox 时遇到的问题。我已经对 codepen 进行了调整，现在它可以与 flexbox 一起使用。

对于所有寻求解决方案的人来说，这就是你的标记应该是这样的：

HTML

<div class="container">
    <img src=""/>
</div>

CSS

.container {
    display: flex;
    justify-content: center;
    width: 50%; /* may have any percentage */
    height: 100%; /* this is needed so that there will be no border at the bottom of the picture if window is resized */
    overflow: hidden;
    float: left; /* this can be left out if there is no textbox on the right side */
}

img {
    min-width: 100%;
    min-height: 100%;
}

编码愉快！