I want to make a few letters in a tag to fit the entire height of the browser window, kinda like so http://flavinsky.com/work/suspended-animations (Notice the 04).
But instead of using an svg image I want to use real text.
Is this possible? If so how do I do it?
use css atribute
font-size:100vh;
Learn more
Related
I'm using HTML5's <picture> tags to create a responsive header that will stretch the entire width of the browser. The header uses an image as the background.
For larger screens I limited the height to a defined value. However, I noticed that a certain breakpoint the image starts to stretch and distort the image.
I'm familiar with using CSS's background-image: url(); to create a mask in order to prevent the distortion, but I don't know what best practices are with <picture>.
My code currently stretches and distorts the image. Is there a way to 'mask' the image?
First thing you should know is that if you will give height to any image then in some screens it will stretch.
So instead of giving the height you should take the image of exact size it will do the thing.
If you can share the code I can fix it and send it to you.
Hope it helps.
User zgood was able to lead me in the right direction. Adding object-fit: cover to the <picture>'s <img> tag got the job done.
I'm making a strictly html5 page for class and we're not allowed to use CSS yet. Is there way to make an image responsive with plain html tags?
Yes, you can set the width="N%" and the image will resize based on the width of the browser window. So 100% will fill the screen, 50% will fill half, etc.
I want the text to take up the entire width of the page so the height/font size will depend on the width of the page.
As far as I know, there is no way to do this with vanilla CSS. You're probably going to want to use a JS library like FitText.
In modern browsers you may be able to achieve the desired effect using viewport units
https://css-tricks.com/viewport-sized-typography/
I am trying to change the width and height of the image tag in angularjs, but the following crops the image instead of re-sizing it. I tried the ng-image-resize but in vain.
ng-src="{{imageInfo.DecachedImageUrl}}" style="width:380px ; height:295px"
This is the same in HTML as with angular. Simply use the width/height attributes instead of style.
ng-src="{{imageInfo.DecachedImageUrl}}" width="380px" height="295px"
I would like to resize an image on my website. I know how to do it by either resizing the image before or calculating the width and height and setting the values in pixels. But I use the same picture multiple times with different dimmensions, so it would take me less time if I could resize the image relatively to its own size.
<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/>
I have tried this, however the problem is that the size is set relative to its parent element.
There's no way to do what you want automatically using HTML or CSS alone. You'll need to use JavaScript to get the image's dimensions, then calculate a percentage of those dimensions and reapply them to the image in pixels
There is a method, but it isn't perfect. It requires a wrapping element whose display is set to 'inline-block' and the image is resized using 'max-width'.
The issue is that the parent element retains the image's original width, which could cause problems depending on your requirements.
Example: http://jsfiddle.net/amustill/GnEw5/