1

I have a div class with an image src and within that I currently have a div for the dynamic text inside this although am open to suggestions. 

<div class=“image-container”>
    <img src=“/assets/product.jpg”)>
    <div class="preview-container">
        <img src="/assets/images/Product_1.jpg" class="prv-img">
        <div class="preview-text">
            <div class="text-outputs">
                <p data-name=“line_1”>SAMPLE TEXT !</p>
                <p data-name=“line_2”>SAMPLE TEXT 2</p>
                <p data-name=“line_3”>SAMPLE TEXT3</p>
            </div>
        </div>
    </div>
</div>

This image remains the same aspect ratio but the image size changes responsively either by jumping to breakpoint sizes, or for smaller screens sizing continuously dependent on screen width.

As hinted at in the code above, on top of this image I want to superimpose 3 lines of text that give the impression that this text is written on the image of the product itself. For some context, it is a photo of a bottle with a blank white label on it and I want to superimpose some words like, Drink XYX, crafted since 1923, Drink Responsibly

I want the text size, spacing, line height and relative positioning of the text on the image to scale continuously as the image changes size.

Any ideas on how to do this. Is it possible with just css or will I need some javascript too?

Any suggestions would be truly welcome.

Jason

Tech 75
  • 533
  • 5
  • 11
  • There is no CSS method for this. Font size cannot be linked (by CSS) to **element** size but there are options - https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container/19814948#19814948 – Paulie_D Dec 08 '17 at 10:14
  • 1
    Just produce the final image with the text on it, it'll be far simpler that implementing some complex stuff just for that. – sjahan Dec 08 '17 at 10:23
  • 1
    @sjahan Exactly. However, do keep the text in machine readable form, in the alt attribute. – Mr Lister Dec 08 '17 at 10:44
  • 1
    Anyway, if you don't want do that, @Tech75, then one solution is to set the width of the image and the font size both in `vw` units. See [fiddle](https://jsfiddle.net/MrLister/kerLwekc/). – Mr Lister Dec 08 '17 at 10:55
  • Thanks @sjahan. I should probably have mentioned that the text will be dynamic. On the same page, users will type text into form fields and whatever they type will appear on the image, and when they switch between devices or change their viewport width, the image and text will scale proportionally. – Tech 75 Dec 08 '17 at 16:01
  • @Tech75 I see. Trouble is you won't be able to do this with pure CSS, because every proportional unit on font size is based on the root font size (like rem) and not on the size of a container. I think the only way you'll be able to do this is with JS: you must define a basis size (when my picture's width is 200px, my text will be 16px for instance) then measure the delta on your picture's width and compute yourself the ratio, then apply it on your text's CSS properties. – sjahan Dec 11 '17 at 08:58

1 Answers1

0

If you don't want to use CSS, then I think you'll need to piggyback on the CSS used to size the image. Assuming you have @media entities that control the image size (either directly, or indirectly by resizing containers), you can add to or duplicate these with similar entries to control the font size in vw units or rem, as appropriate.

I realize this isn't the bulletproof general solution you might like -- if you change themes and the breakpoint widths change, you have to update the CSS also -- but it is a way to do it without JavaScript.

It would be great to have a way to size text proportional to its container.

Andre Guirard
  • 720
  • 4
  • 7