Search code examples
htmlcss.netimagealignment

How to use text font percent instead of text image for responsive design? my code attached

i have to use text in html. I can do that but I need to make it responsive and I am unable to use percentage in text for which I am using image of text and applying using percentage for its width and height but every image of text get worst some stretched and looks smaller some text looks bigger

code I am using is,

<img class="LohaD" src="./Styles/img/LohaD.png" />

.LohaD {
    width: 78.2%;
    height:2.4%;
    object-fit: contain;
    text-align: center;
    display: block;
    vertical-align: central;
    margin-left: auto;
    margin-right: auto;
}

Main disadvantage is that I can not maintain text size using it as pic how to use it as text some how with percentage ? hopes for your suggestions thanks

Solution

  • You can use Viewport units. For example: 

    .scalable-text {
 font-size: 100vh;
}

    Check this https://css-tricks.com/almanac/properties/f/font-size