Html 将img居中放置在较小的分区内，但未按预期工作

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

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

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

尝试使用flexbox也会陷入混乱，我尝试过的其他方法都因为其他原因而无效

由于包含图像和文本的这部分是整个页面的一部分，因此它们依赖于许多其他内容。这样我就不用在这里发布全部代码了，我已经准备了一个

活动名称
他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。
继续。。。
4月1日

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

图像包装器只能进入事件包装器的中间（仅覆盖其宽度的一半）

由于图像将由后端加载，因此不可能使用CSS属性“background image”

图像大小可能不同

如果页面调整了大小，文本应该一直可读到最后，图片可能会有更多溢出（这会被隐藏…）

一切都应尽可能保持动态，因此无法设置特定的高度和宽度

解决方案应该与浏览器兼容（IE的旧版本可能会被忽略…是的，我知道，变量在IE中不起作用，这只会在我没有完成设计时使用！）

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

错误的img位置：

正确的img定位：

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

我是不是在路上的某个地方出错了？甚至可以只使用CSS来实现这一点吗

编辑

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

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

编辑2

正如我在下面的回答中所述，我发现了flexbox在我之前的尝试中无法使用中给出的解决方案的原因： 那里的解决方案在图像上使用了“flex:none”，这与我的图片没有任何关系，尤其是在我的imgs parent-div中没有将其居中。

看看这是否有帮助

---

我使用图像作为

imagewrapper

的背景，然后隐藏图像而不显示：无，因此它的宽度和高度与以前的设置相同。

多亏了Abhitalks，我发现了flexbox的问题。我已经对代码笔进行了调整，以便它现在可以与flexbox一起使用

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

HTML

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

---

快乐编码

你能发布一个你想要它看起来怎么样的截图吗？要弄清楚问题到底出在哪里有点难。感谢您提出的详细问题。我希望图像水平居中于wrapper-div内。在调整窗口宽度时，您会看到图像在右侧被剪切，而不是在左侧，这会使图像的右侧部分未聚焦。如果图像水平居中，则另一个鸭子将可见。这是我打算做的，所以我将尝试创建一个图片来显示它。你能看看这是否是你正在寻找的：。请让我知道，然后我会尝试在回答中解释它。谢谢，可惜没有。我忘了提到使用背景图像将不起作用…：（

flex

确实有效。将您的问题分解成更小的区域，然后进行测试。请看这里-我忘了提到我不能在上面使用背景图像，因为图像将从后端加载…我必须将此添加到条件中…您使用的后端类型是什么？键入3，根据我的老板，只能加载imag虽然我不确定这是否可能，但我无法与他争论^^^@Kathara你能添加一些javascript或jquery吗？@Lal这是可能的，是的，我必须承认我对它不是很有经验，你不需要在任何这些和显示上定位在图片上也不是必需的。我也刚刚意识到。修改了答案，谢谢

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

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

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