html - 调整大小时(响应式)从图像到文本(填充)的距离相同

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，所以当你看到第二个例子时，如果一条线不完全适合你就会有那个差距。

你需要对font-size、line-height和图片高度能适应的行数进行完美的计算。例如:

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

如果在同一个计算中，您将行高更改为 20px，您将获得:100/20 = 5，这意味着正好有 5 行，底部没有任何内容，所以文字不会与您的图片形成差距。