6

EDIT: I emphatically do not want to rely on fixed sizes for anything.

I have an image that I want to display inline with text. I want the image to

a) be square, and

b) be as tall as the text.

Imagine that a CSS unit called "H" exists, which is equal to the height of a line in the much same way that "ex" is equal to the height of an "x". I want to be able to write code like this:

img.myclass {
    width: 1H;
    height: 1H;
}

It appears that no such unit actually exists. Am I right?

If there is no such unit (precicely stated, I want the distance from the baseline on one line to the baseline on the next line) then how to I accomplish my goal of line-filling square images, without Javascript?

spraff
  • 32,570
  • 22
  • 121
  • 229
  • Do the images have square proportions or do they need to be stretched. – Bruno Oct 30 '12 at 19:06
  • 1
    if you don't want to rely on fixed anything, and want to do this dynamically you have to use javascript, or some other language that can fire after the dom has loaded and it knows the height of your text. – Ryan Oct 30 '12 at 21:25

6 Answers6

1

Apparently there is an lh unit in the works: https://css-tricks.com/lh-and-rlh-units/

But, until then...

You could set your line-height using a CSS custom property. Something like:

* {
  line-height: var(--line-height);
}

.mydiv {
  --line-height: 1.37;
  font-size: 24px;
}

And then to get the actual height of a line you multiply --line-height by 1em (or however many ems to get the multiple of the height of the line you want) using calc, like:

.mydiv p {
  padding-left: calc(var(--line-height) * 1em);
}

The major caveat is this will only work if you use unitless values for --line-height.

Neil Haskins
  • 161
  • 1
  • 7
0

You can pick a fixed width/height and set the line-height and img width/height to that constant size, or you can use javascript. There is no way to refer to another CSS property when setting a new one, which is what you seem to be hoping for.

Irongaze.com
  • 1,639
  • 16
  • 22
0

I'm probably not looking at this right... but couldn't you just give the line a specific height and then set the image to fit it?

<span style="display:inline-block;height:20px;">

Hello <img src="testtext.png" style="max-height:100%;" />

</span>
Spencer May
  • 4,266
  • 9
  • 28
  • 48
0

You can set the font-size and/or line-height of the text in ems or exs and you can use that same measure for the image height/width. Though if you want to set them using a variable I might suggest LESSCSS

Robert
  • 77
  • 1
  • 14
0

If you set the line-height to be a specific value x and your font-size to a specific value y then you know that the line height will be: x * y. You then have a height for any given amount of text.

Example: font-size: 10px; line-height: 120%; your line height will be 120% * 10px or 12px. If your block of text is 10 lines then you know its 120px's in height. See W3 line-height and W3 font-size for more info.

NOTE: This is a VERY imprecise way of doing things. Anything from screen size to a custom font size on the end users browser will throw this off. As @Irongaze.com said you can't refer to other css settings when setting a new one. This is best done in javascript.

Ryan
  • 5,644
  • 3
  • 38
  • 66
  • Or simply set the line-height to 12px... :-) – Irongaze.com Oct 30 '12 at 19:50
  • @Irongaze.com http://stackoverflow.com/questions/10093218/css-line-height-smaller-than-font-size-results-in-odd-overflow-within-a-div That is why that is a bad idea.You can in fact have a font-size bigger then your line-height which would not work for what he is going for. – Ryan Oct 30 '12 at 21:07
0

CSS has a line-height property, so if you set that to a certain value, say 1.2 or 120%, then you know what the em to line height ratio is, and you can use that as a unit for the image.

img.myclass {width:1.2em; height:1.2em}

Note, however, that images align vertically with the baseline by default, not with the bottom of the line. See also my illustration in this answer.

Community
  • 1
  • 1
Mr Lister
  • 45,515
  • 15
  • 108
  • 150