Question

我一直在尝试解决这个问题，但即使有很多解决方案，即使在堆栈上我也找不到符合我需要的解决方案。

我想将img放在其包装div中，其中包含“overflow：hidden”，以便图像可以有任何宽度。问题是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中的所有内容都可以被操作，但条件如下：

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

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

错误的img-positioining：

正确的img-positioning：

任何可以帮助我解决此问题的人都将不胜感激。

我在途中某处犯了错误吗？是否有可能只使用CSS？

修改

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

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

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

快乐的编码！

Answer 2

看看这有助于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的背景，然后隐藏图像而不显示：无，因此它将采用与先前设置相同的宽度和高度。

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

2 个答案: