中心img在较小的div不按预期工作

Question

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

我想将一个img放在具有“overflow:hidden”的包装div中，这样图像就可以有任何可能的宽度。问题是包装器div与包含文本的同一高度的另一个div对齐。

我尝试过绝对定位的解决方案，但由于宽度和高度都没有设置在特定数量的像素中，这将无法工作，图像将不再显示。

试图使用flexbox也以一团糟告终，我尝试过的所有其他东西都因为别的原因而不起作用。

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

<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, conhtml" target="_blank">setetur 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_包装中的所有内容都可以操作，但条件如下：

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

以下图片将显示我的意思：

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

我是不是犯了什么错误？仅使用CSS是否可能做到这一点？

编辑

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

将未知大小的大图像放在较小的div中，隐藏溢出

在较小的div内将图像对齐到中心

将图像集中在一个对它来说太小的div中？

在div中居中显示过大的图像

在较小的div中居中一个大图像

你会注意到这些解决方案要么在img上使用绝对定位，需要一个明确的高度或宽度，要么使用flexbox，在我的例子中，由于未知的原因，它不起作用。

编辑2

正如我在下面的回答中所说，我发现了Flexbox在我之前的尝试中无法使用解决方案的原因，该解决方案在中心中给出了一个隐藏溢出的较小div中未知大小的大图像：该解决方案在图像上使用了“flex：无”用我的照片做任何事情，尤其是没有把它放在我的imgs父母div中。

Answer 1

看看这是否有助于提琴

#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;
}

我已经使用图像作为背景的图像包装器，然后隐藏图像不显示：无，所以它将采取相同的宽度和高度作为以前的设置。

Answer 2

多亏了Abhitalks，我发现了flexbox的问题。我已经调整了代码，使它现在可以与flexbox一起工作。

对于寻求解决方案的每个人来说，您的标记应该是这样的：

超文本标记语言

<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%;
}

快乐编码！