调整大小（响应式）时，从图像到文本（填充）的距离相同

Question

关于stackoverflow的第一篇文章，我希望你们能够帮助我。 我有一张图片，可以响应地调整大小，但由于我的相对填充为 0.5em，我不断得到一些恼人的间距。这意味着根据我的窗口大小，我有两种情况。 1：间距适合，如 this，或 2：底部有一个恼人的空间，因为像 this 这样的 em 填充。

所以我的问题是，有没有办法确保从图像到右侧文本的距离与从图像到底部文本的距离相同？我不介意，如果我的照片在高度上扩大一点，那么距离总是一样的。

我尝试了一些不同的 div，以及一些不同的响应性方法，但我什么都做不了。希望大家帮帮我。

HTML：

<div class="panel-body">
                            <div class="img-exp">
                                <img src="http://placehold.it/100x100">
                            </div>
                            <div class="text-exp">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                            </div>
                        </div>

CSS：

    .panel-body {
    text-align: justify;
    background-color:black;
    padding:0.5em;
}

.img-exp {
    position: relative;
    float: left;
    width:45%;
    overflow:auto;
    height:auto;
    padding:0 0.5em 0.5em 0; /*top right bottom left */
}

.img-exp img{
    max-width: 100%;
    height: auto;
    /*
    height:auto;
    max-width: 100%;*/
}

提前致谢。

Answer 1

它是因为你有padding-bottom: 0.5em而产生的，所以当你看到第二个例子时，如果一条线不完全适合你就会有那个差距。

您需要对字体大小、行高和图像高度可以容纳的行数进行完美的计算。例如：

假设您的图像是 100x100，字体大小是 10 像素，行高是 15 像素。 100 / 15 = 6.66666666666 所以它适合 6 行文本，最后一行将占据 0.6 行（正常行的 60%）。为避免这种情况，您需要进行另一次计算。

如果在同样的计算中，将 line-height 更改为 20px，您将获得：100 / 20 = 5，这意味着 5 行正好，底部没有任何内容，因此文本不会与您的图片。