CODEWITHSUNDEEP
htmlcssimageresponsive-design
JohnDoe
JohnDoe

Reputation: 545

Same distance from image to text (padding) when resizing (responsive)

First post on stackoverflow, and i hope you guys are able to help me out. I have a picture, which is resized responsively, but i keep getting some annoying spacing because of my relative padding with 0.5em. This means i have two scenarios according to my window size. 1: The spacing fits, like this, or 2: I an annoying space in the bottom because of the em padding like this.

So my question is, is there a way, to make sure that the distance from image to right text is the same as distance from image to bottom text? I wouldn't mind, if my picture expanded a bit in height, so the distance's always the same.

I've tried with some different divs, and some different approaches in terms of responsiveness, but i can't get anything to work. Hope you guys can help me out.

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

Thanks in advance.

Upvotes: 0

Views: 230

Answers (1)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

It is produced because you have padding-bottom: 0.5em, so when you see the second example and if a line doesn't fits completely you will have that gap.

You need to make perfect calculations with the font-size, the line-height and the number of lines that the height of the image can fit. For example:

Imagine that your image is 100x100, your font-size is 10px and your line-height is 15px. 100 / 15 = 6.66666666666 so it fits 6 lines of text and the last line will occupy 0.6 lines (60% of a normal line). To avoid this, you need to make another calculation.

If in this same calculation, you change the line-height to 20px, you'll obtain: 100 / 20 = 5, it means, 5 exactly lines and nothing in the bottom, so the text doesn't make a gap with your image.

Upvotes: 1

Related Questions