I have a div with 70%
width, and here's what I want to do:
Is this possible with only css? Here is my code:
.parent { width:70%; height:auto; min-height:100px; background:red; font-size:10vw; }
Please help me to change the font-size dynamically to the parent class <hr> <div class="parent"> This Text </div>
Note: the div size is responsive , this is important. Thanks in advance!
You just have to add display: inline;
in your code
.parent { width: 70%; height: auto; min-height: 100px; background: red; font-size: 10vw; display: inline; }
<div class="parent"> This Text </div>
Perhaps not quite what you're looking for, but something - You can make both the font and the element relative to view width.
p { font-size: 5vw; background-color: red; width: 50vw; }
<p> I'm a P! </p>
**You can change font-size:10vh;**
.parent {
width:70%;
height:auto;
min-height:100px;
background:red;
color:white;
font-size:10vh;
}
Please help me to change the font-size dynamically to the parent class
<hr>
<div class="parent">
Text
</div>
Yes but I think you need to use JS(jQuery).
JS:
$(function(){
var box = $('.box');
var boxWith = box.width();
$('.box h1').css('font-size',boxWith);
});
Here, I Updated it.... JS Fiddel
try to use
css
.parent
{
width:70%;
height:auto;
min-height:100px;
background:red;
font-size:10vw;
}
span{
display:inline-block;
transform:scale(1.8,1);
-webkit-transform:scale(3,1);
}
HTML
<div class="parent">
<span>This Text</span>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.