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
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.
Related
I am trying to embed an image (with a mathematical equation) in an HTML text such that the images scales with text, regardless of what font size is chosen.
Using a simple example image from Wikipedia, an example is shown at http://jsfiddle.net/7ds334hg/show/:
<p>There is a huge demand for long text. Therefore, this paragraph contains a couple of words that are not particularly interesting. Much more interesting is whether the image below is shown correctly. Hmm...</p>
<ul>
<li><p>The following letters should have roughtly the same size: X <img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/f5471531a3fe80741a839bc98d49fae862a6439a" alt="X" style="height:1.05em;vertical-align: -3px" /></p>
</li>
</ul>
I am giving an image height in "em" to make sure that the image scales well regardless of the actually chosen font size. In firefox and Chrome, th example works fine.
On Android (5.1.1), however, the image is rendered way too small:
Funnily, shortening the rubbish text makes the the page look correct (http://jsfiddle.net/7ds334hg/1/show/).
How can I fix this such that the images are scaled correctly on most devices?
Consider a page with only a text "foo". I would like the text to take as much width as possible or 30% of the height. I don't want the text to be stretched and I don't want any js.
Setting font-size to 30vmin is not satisfying, since it doesn't care about the width.
If I assume a fixed aspect ratio, it is possible to do it with svg/viewport, but I would like to be able to use different texts, like "foo" and "foobar", without having to change anything.
This is manageable with images or svg shapes, but I can't do it with text.
I have a header with some info about my page at the website http://danceforovariancancer.com.au
The header html is
<div class="container-fluid myheader text-center">
<div class="headeroc">
Ovarian Cancer
</div>
<div class="headerdance">
Dance-o-thon
</div>
<div>
Registerget sponsors
</div>
<div class="headerdate">
<span class="glyphicon glyphicon-calendar"></span>May 14th <span class="mybold">2016</span>
</div>
<div class="kingston">
<span class="mybold">3</span><time>pm</time> - <span class="mybold">11</span><time>pm</time>
at the <a target="_blank" href="https://www.google.com.au/maps/place/Kingston+City+Hall/#-37.9305426,145.0266516,14.25z/data=!4m2!3m1!1s0x6ad66eb237f62e3f:0xc9e49003d9d323c1!6m1!1e1" class="mybold">Kingston City Hall</a>
</div>
<div class="kingstonmap" id="kingstonmap">
</div>
</div>
and uses just some text styling classes for the size and boldness and then some padding too. I realised that when I rescale the width of the site, the text just moves to the next line and it looks pretty ugly. Here is a demo of a nicely resizing header with text
Do they use media queries or something else because it re-sizes at nearly every width step so it doesn't seem like media queries, is there an implemented way to do this in bootstrap with classes? Will these re-size all the text so to speak relative to each others font size, so it all looks the same. Cheers :)
Thank-you
use vw instead of em
here is a link to another stack overflow page with a similar question.
Font scaling based on width of container
I think 8 or 9 vw will get it to around the size you want it to be at.
Cheers
JavaScript is the way to do it smoothly (or I guess a media query for every pixel, but that's absurd). I'm not going to write a plugin on here, but basically you would do a window resize event and check if the height of the element changes. If it does, that means it's line broke, so you would change the font size. You'd also want to take line-height into account as you change font size.
For a much quicker solution, I've always liked the FitText plugin:
http://fittextjs.com/
I am trying to fill a container, or a well, I believe the container will work better though. I need the container to stay the size it is in this Jsfiddle, but I need the Text to enlarge and stretch closer to the borders.
<div class="container-fluid color-back">
<div style='font-size:2500%; color:orange; text-align: center'>
Text
</div>
</div>
This is little harder to do but not impossible. You need to calculate the container width and set the fontsize accordingly. It is tricky since the font size will vary based on the number of characters in the text. A javascript based solution is probably easier to do. Did you look at something like http://fittextjs.com/?
For pure css based solution look in to vw and vh. They are not exactly fit for a container but based on viewport size.
I have a web slider with an image in it. I've asked my designers for an image of the highest possible dimensions that I'd like to support (1920x1080 browser window).
This looks great at the highest resolution, but as the browser window gets smaller and smaller the image doesn't scale appropriately. I'm not sure what techniques I should be performing to make sure an image like the one in the example above is scaled down appropriately as the window size changes.
Should I ask for various resolutions of the same image from our designer? And swap out the image using media queries in css? Or is there some other way to properly do this in CSS using background image size, etc?
Edit:
So the image was created with text and graphics. The problem may be that there's no way to support this on various device sizes. How do other people/companies handle images with text/graphics as part of the image, and not over on top of it?
Try Applying max-height:100% & max-width:100% to the element you wish to remain scaled.
I.E
<div class ="wrapper">
<div class ="image">
</div>
</div>
CSS
.image{
max-height:100%
max-width:100%
}