how could i fit the font stretch to div size with css similar to an image with a height and width?
maybe something like:
.div p{
font-stretch: div(100%);
transform: div(100%);
}
stretch letters effect
I need javascript?
use clamp it is alter native for media query
font-size : clamp(10px, 25px, 50px)
Related
I have a div, and I am given 3 values for the width of the div. The normal width of the div is 120px, the min width of the div is 90px, and the max width of the div is 150px. I guess I am asked to apply these values based on the width of the screen. I would like to know how to write css for this?
I have tried below code, but it seems my div is always 120px.
.myDiv {
width: 120px;
max-width: 150px;
min-width: 90px;
}
Should I use media query?
Max-width and min-width as px will only have an impact if your width is used with percents %
(or other window based width like vw).
In your case I think indeed the best thing to do is use media queries.
in this page
http://demos.roxiwd.com/index.php/ar/kgar
How to show images normal like the next row
and how to show the words once the mouse hover any point on image not the word area.
img:hover .words {
display: block;
}
The biggest problem is that you have a dynamic column width and a fixed height on your image containers (with background-size set to 100% 100%). This results in deformed images. You say you want to change that on hover. To do so, you first need to reset the height of this container:
.uc_animated_border_banner:hover .uc_animated_border_bg {height: auto!important;}
Next you should use the padding trick to set the (now dynamic) height equal to the aspect ratio. The aspect ratio of the image is 450px/350px = 1.29. This equals to 129% padding-bottom. Correct this for the line-height of the element that actually takes up verticale space in the box (the h2, with a height of 30px) and you end up with 129% - 30px for the padding-bottom. Split this for equal padding top and bottom, and you end up with 64.5% - 15px padding on both top and bottom of the h2 element. This results in a box with an exact aspect ratio of 1.29 (as long as the h2 fits on a single line).
.uc_animated_border_banner:hover .uc_animated_border_banner .uc_content_box h2 {
padding-top: calc(64.5% - 15px)!important;
padding-bottom: calc(64.5% - 15px)!important;
}
TIP: Use position: absolute on the h2 for a solution without the 15px/30px and single-line constraint.
Although this works I would chose for a more simple solution. Find the inline CSS statement at line 214:
.uc_animated_border_bg {background-size: 100% 100%!important;}
... and replace it with:
.uc_animated_border_bg {background-size: cover!important;}
I think the result looks better and the solution is much simpler. This alternative solution works for any image (irrespective of their aspect ratio). The only down-side is that an unknown amount of the image is invisible/cut off.
Definition says 1vw = 1% of viewport width. But I don't get it what does it mean when used with font-size? For instance what does it mean if I set:
h1 {
font-size: 10vw;
}
I thought that if I have h1 with 10 characters it would take 100% of viewport, but it does not.
Font-size refers to the vertical size of the font not character width
See the demo below for how they react differently.
h1 {
font-size: 10vw;
}
h1:nth-of-type(2) {
font-size: 10vh;
}
<h1>MY HEADER</h1>
<h1>MY HEADER</h1>
JSfiddle Demo
As Paulie_D stated:
Font-size refers to the vertical size of the font not character width.
If you're looking for the width of the character, you might want to look at font-weight (for the thickness of a character) or font-kerning (for the spacing between characters).
the vw unit is based on the width of the viewport.
1vw is 1% of the browser viewport width. (vh is the corresponding value for height)
This means if the viewport is 600px wide then 10vw is 60px and that's how high your font will be
It also means that dimensions, including heights, can be set relative to the width of the screen, which is very useful for maintaining aspect ratios. This means your font size will respond to the size of the viewport, something which you can't do with a font any other way
It's not supported in all cases, so it's good to provide a pixel fallback, like this:
height: 100px; /* over-ridden if vw can be interpreted */
height: 10vw; /* ignored if not understood */
I have the following html
<a class=logo></a>
I want to replace it with my logo. But I want the logo to take up 100% of the vertical room, and an amount of horizontal room that will leave the image proportional
I could try to do
.logo {
background-image: 'logo.svg';
background-size: auto 100%;
}
except I would still need to set a height and width in order for it to take up space.
I could try to do
.logo:before {
content: url('logo.svg');
}
except the only way to set the height and width of the image is with
zoom: X%
or
transform: scale(50%);
and neither of these will react to changing heights
Is there any other way I'm missing?
Edit: fiddle - how can I get the width correct here?
If you're wanting a proportional box with 100% width and a height that matches the aspect ratio of the background-image, set the vertical padding to a percentage that matches the vertical ratio.
i.e. if your logo is a 2:1 rectangle, set your width to 100% and your padding to 25% 0 and your tag will stay proportionally sized (you'll need to set it to display: block;). Then background-size: 100% auto (or the other way around) should work because the background image's aspect ratio is the same as its container.
fiddle
Given the following CSS rule,
#block1 {
text-indent: -1000em;
background: transparent url(../images/xxx.png) no-repeat scroll center center;
width: 100px;
height: 50px;
display: inline-block;
}
Assume the image xxx.png is of dimension 100px by 50px. If I need to make this image displayed on #block1 looks smaller, can I simply change the width and height of #block1 or I have to first re-size the image and then change the width and height of the #block1 accordingly.
thank you
You can't in CSS1 and 2, but CSS3 supports the background-size property, which if you set to 100% should give you what you are looking for.
However, you probably should just resize the background image though, unless you have a compelling reason not to :)
CSS can only position the image, not adjust it. If you absolutely needed to resize the image through CSS, you'd have to have the image actually inserted as an img tag, then position it behind the content. It's best just to edit it.
no, the image will just appear to be cropped.