High resolution image-CodePudding

My logo image has a high resolution but when I put it in the html code, the image is fuzzy and I didn't put any height or width I just put the image. I want that when I put my image on the website, the image remains in high resolution.

        <nav >
            <div >
                <div >
                    <div >
                        <a  href="javascript:void(0);" data-toggle="collapse" data-target="#navbar"><span>Menu mobile</span></a>
                        <div id="logo_home">
                            <h1><img style="margin-bottom: 10px;" src="img/logo.png" alt=""></h1>
                        </div>
                        <!--/top_nav-->
                    </div>
                    <!--/navbar-header-->
                </div>
                <!--/navbar-header-wp-->
                <div  id="navbar">
                    <ul >
                        <li >
                            <a style="color: #cc9933;" href="index.html">Início</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- /Nav -->
    </header><!-- /Header --> ´´´

CodePudding user response：

Learn about CSS Object-fit property here: https://www.w3schools.com/css/css3_object-fit.asp, this will help stop or control how your image is scaled/displayed

CodePudding user response：

You want the rendered size of the image to be exact division by integer of original image size in pixels.

So if in your CSS width: 140px then use an image with actual width of 140px or 280px or 420px etc.