Adjust Image Size Based on the Font Size

Adjust image size based on the font size

If you set the size of your font in the <p> tag, you should just be able to use height: 1em; on p img to set the image's height to that of the font.

Here's a jsfiddle to show what I mean:

body {

  font-size: 62.5%;

  /*sets 1em to 10px for convenience*/

}

p {

  font-size: 3em;

}

p img {

  height: 1em;

  width: auto;

}

<p>Hello world! <img src="http://images.wikia.com/dragonvale/images/e/e8/Space_invader.jpg"></p>

How to set image size same as container font-size

I believe you accomplish it by setting image height relative to the font height and setting the image width to auto like so:

.svgicon img, .svgicon svg {

  height: 1em;

  width: auto;

}

p, span {

  font-size: 16px;

}

<p>text <span class="icon svgicon"><img class="custom" src="img.jpeg" /></span></p>

<p>text <span class="icon svgicon"><svg>...</svg></span></p>

Adjusting centered text font size based on image size. How?

Here is the comment above implemented as an answer. Interestingly enough, even though the lines and the font don't appear to align, they are indeed actually centered.

The "x" at the center creates the illusion of nonalignment; a possible side effect of NOT using mono-spaced fonts in order to achieve a more unnecessarily precise alignment..?!

Then again.. mono-spaced fonts are not that good looking...

Sample resize outputs:

<?php

  // We Declare our canvas width & height dimensions
  $myCanvasWidth  = 640;
  $myCanvasHeight = 360;

  // We Create an empty and dark canvas from these dimensions above
  $myCanvas = imagecreate($myCanvasWidth, $myCanvasHeight) or die("Can't create image!");
  // We Allocate a color to be used as the canvas background
  $colorIndigo = imagecolorallocate($myCanvas, 0x3F, 0x51, 0xB5);
  // We Apply color as canvas background
  imagefill($myCanvas, 0, 0, $colorIndigo);

  // We Allocate a color to be used with the canvas text
  $colorWhite = imagecolorallocate($myCanvas, 0xFF, 0xFF, 0xFF);

  // We Declare our TTF font path in Windows 10...
  $myFont = 'J:\Montserrat-SemiBold.ttf';

  // Static font seed value...
  $fontSize = 16;
  // We set the dynamic font size
  $myFontSize = $myCanvasWidth / $fontSize;
  // We set the text angle
  $myTextAngle = 0;

  // We Declare the text string to be drawn on canvas...
  $myText = $myCanvasWidth . ' x ' . $myCanvasHeight;

  // We Calculate and return the bounding box in pixels for the text string to be drawn on canvas...
  $myTextBoundingBox = imageftbbox($myFontSize, $myTextAngle, $myFont, $myText);

  // Get the text upper, lower, left and right corner bounds of our text bounding box...
  $lower_left_x  = $myTextBoundingBox[0]; 
  $lower_left_y  = $myTextBoundingBox[1];
  $lower_right_x = $myTextBoundingBox[2];
  $lower_right_y = $myTextBoundingBox[3];
  $upper_right_x = $myTextBoundingBox[4];
  $upper_right_y = $myTextBoundingBox[5];
  $upper_left_x  = $myTextBoundingBox[6];
  $upper_left_y  = $myTextBoundingBox[7];

  // Get Text Width and Height
  $myTextWidth  =  $lower_right_x - $lower_left_x; //or  $upper_right_x - $upper_left_x
  $myTextHeight = $lower_right_y - $upper_right_y; //or  $lower_left_y - $upper_left_y

  //Get the starting position for centering
  $start_x_offset = ($myCanvasWidth - $myTextWidth) / 2;
  $start_y_offset = (($myCanvasHeight - $myTextHeight) + $myFontSize * 2) / 2;

  // Write text to the image using TrueType fonts
  imagettftext($myCanvas, $myFontSize, $myTextAngle, $start_x_offset, $start_y_offset, $colorWhite, $myFont, $myText);

  // Draw a horizontal dashed line for reference only
  imagedashedline($myCanvas, 0, $myCanvasHeight/2, $myCanvasWidth, $myCanvasHeight/2, $colorWhite);
  // Draw a vertical dashed line for reference only
  imagedashedline($myCanvas, $myCanvasWidth/2, 0, $myCanvasWidth/2, $myCanvasHeight, $colorWhite);

  // We set the correct http header for png images...
  header('Content-Type: image/png');

  // We Output a PNG image to either the browser or a file
  imagepng($myCanvas);
  // Finally, we free any memory associated with myCanvas; the image. 
  imagedestroy($myCanvas);

?>

The imageftbbox() function illustrated.

The imageftbbox() returns an array with 8 elements representing four points making the bounding box of the text:

Make image respect the font-size property?

You can use height: 1em;, or if that's too much height: 0.95em; or whatever value in combination with width: auto to adjust the image height in relation to the currently used line-height / font-size.

Just change the font-size n my snippet and you'll see the effect. I used 0.75em to adjust it.

.x {

  font-size: 32px;

}

img {

  height: 0.75em;

  width: auto;

}

<span class="x">lorem ipsum: <a href="/mywebpage/" target="_blank" id="l">link</a><img src="https://i.stack.imgur.com/5ucJK.png"></span>

Adjust image size based on the font size on Android Chrome

According chrome behaviour, body's width will change until screen 980px.If your screen is under 979px.Body's width fixed in 980px.So, Image's size will not change because em unit is calculating based on parent.Images size will be small when screen is smaller.If you want to see normal width, you need to put
<meta name="viewport" content="width=device-width, initial-scale=1"> in head tag.

Edited

I think Font size's behaviour is different with other's width in chrome.

How to make image size dependent on the parents font size

Use em for image height, or for image width.

  img{
    width:5em;
    }

    <h1>This is heading 1
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/></h1>

    <h3>This is heading 1
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/></h3>

    <h6>This is heading 1
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/></h6>

Font scaling based on width of container

If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.

If the container is the body, what you are looking for is Viewport-percentage lengths:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

The values are:

• vw (% of the viewport width)
• vh (% of the viewport height)
• vi (1% of the viewport size in the direction of the root element's inline axis)
• vb (1% of the viewport size in the direction of the root element's block axis)
• vmin (the smaller of vw or vh)
• vmax (the larger or vw or vh)

1 v* is equal to 1% of the initial containing block.

Using it looks like this:

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so do the font-size, without needing to use media queries.

These values are a sizing unit, just like px or em, so they can be used to size other elements as well, such as width, margin, or padding.

Browser support is pretty good, but you'll likely need a fallback, such as:

p {
    font-size: 16px;
    font-size: 4vw;
}

Check out the support statistics: http://caniuse.com/#feat=viewport-units.

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography

Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography

And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS

---

Related Topics