0

I wrote a simple static page which includes an image inside a <nav> element. It was originally designed in Bootstrap Studio, but I add a little piece of style and asset swap for certain images. Here's how it's written

<nav class="navbar navbar-light navbar-expand-md fixed-top navbar-shrink py-3" id="mainNav">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center" href="/">
            <!-- This is the problematic image -->
            <img id="mainLogo" src="assets/img/logo.png">
        </a>
        <button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navcol-1">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item"><a class="nav-link active" href="index.html">Home</a></li>
                <li class="nav-item"></li>
                <li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
                <li class="nav-item"><a class="nav-link" href="contacts.html">Contact us</a></li>
                <li class="nav-item"><a class="nav-link" href="features.html">Features</a></li>
            </ul><a class="btn btn-primary shadow" role="button" href="/login">Log in</a>
        </div>
    </div>
</nav>

And here's the stylesheet

#mainLogo {
    height: 40px;
}

@media screen and (min-width: 768px) {
    #mainLogo {
        height: 50px;
    }
}

In most other browsers—mobile or desktop, simulated or real—the image works as intended. In iOS Safari, however, the image would just ignore the CSS and goes to be 100vw. The logo in iOS Safari

This is reported by one of the users and I don't have any Apple device. Is there any workaround?

starleaf1
  • 2,701
  • 6
  • 37
  • 66
  • but I can't see you setting 100vw width anywhere nor inline or in the css !! You're only setting the height and keeping the width unconstrained ! – OMi Shah Apr 15 '23 at 11:50
  • @OMiShah. Correct, `100vw` is not the expected result. The expected result is the image would be 40 or 50 pixels high, while the width would scale. In most browsers, setting one dimension without explicitly setting the other would maintain the original aspect ratio of the image. – starleaf1 Apr 15 '23 at 12:06
  • Please post the `width x height` values of the **original** logo.png in your Question. My guess is that when the image `height` gets scaled down to `40px` the scaled down image `width` exceeds the device width. – Rene van der Lende Apr 15 '23 at 14:39
  • 1
    Perhaps you could make a runnable snippet which includes any doctype etc declarations. – A Haworth Apr 15 '23 at 15:12

0 Answers0