Is There a Way via CSS to Set the Image Height to the Line-Height

Is there a way via CSS to set the image height to the line-height?

Use img{height: 1em;} /* whatever your line height may be, it is affected by its font-size /*

See this Updated Demo (Increase or decrease the font size to view the result.)

Set height of SVG to line-height?

I would consider the svg as a background-image to be sure it will match the height without setting any height:

h1 {

  line-height: 1;

  padding-left: 1.8em;

  background-size: auto 100%;

  background-repeat: no-repeat;

}

<h1 style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg)">

  Headline

</h1>

<h1 style="font-size:50px;background-image:url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg)">

  Headline

</h1>

<h1 style="font-size:10px;background-image:url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg)">

  Headline

</h1>

Inline image affecting line-height

Replace

display:in-line;

with

position:absolute;

http://jsfiddle.net/ENch9/

OR

vertical-align:text-top;

http://jsfiddle.net/c6YqG/

Image max size according to parent's line-height

There's no pure HTML/CSS way to do this, sadly.

Why are images centered vertically with `line-height` positioned 2 pixels below where they should be?

You have to set zero font-size for container div elements.
Because images are displayed as inline elements they are affected by text in container div. Zero font-size fixes this:

.img-wrapper-center
{
    font-size:0;
}

Here is fiddle: http://jsfiddle.net/bZBsR/

How can I make all images of different height and width the same via CSS?

Updated answer (No IE11 support)

img {

    float: left;

    width:  100px;

    height: 100px;

    object-fit: cover;

}

<img src="http://i.imgur.com/tI5jq2c.jpg">

<img src="http://i.imgur.com/37w80TG.jpg">

<img src="http://i.imgur.com/B1MCOtx.jpg">

Why doesn't line-height work on img elements?

The page you link to says:

On replaced inline elements such as buttons or other input elements, line-height has no effect.

img elements are replaced inline elements, so line-height has no effect on them.

You need an extra element if you want to set the line height of a line box around an image.

span {

  line-height: 200px;

}

div {

  outline: solid black 1px;

}

<div>

  Hello <span> <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt="Sample Image"> </span> World

</div>

<div>

  Hello

  <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt="Sample Image">World

</div>

---

Related Topics