将img放在较小的div中，不按预期工作-Java 学习之路

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

我想将一个img集中在它的wrapper-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的旧版本可能会被忽略......是的，我知道，变量没有完成设计！:-)）

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

错误的img-positioining：
wrong!

正确的img-positioning：
correct!

任何可以帮助我解决这个问题的人都将不胜感激 .

我在路上的某个地方犯了错误吗？是否有可能只使用CSS？

EDIT

我考虑过以下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，在我的情况下由于未知原因不起作用 .

EDIT 2

正如我在下面的回答中所述，我发现flexbox在我之前使用Center a large image of unknown size inside a smaller div with overflow hidden中给出的解决方案时没有工作的原因：那里的解决方案在图像上使用"flex:none"对我的图片没有任何作用，特别是没有居中在我的imgs parent-div中 .

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

快乐的编码！

回复于 2024-05-15T16:33:50+08:00

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

回复于 2024-05-15T16:33:50+08:00

将img放在较小的div中，不按预期工作

2 回答

相关问题