Topic: Recommended way to style logo image in navbar for responsive result.

gcrossan pro asked 5 years ago


Given a navbar configuration as commonly seen in your documentation & templates, for example http://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/I-2/index.html Also Given that I wish to prefix the navbar-brand text of "Navbar" with an image logo.... lets call this "LogoNavbar". Q. What is the recommended way to style an image such that it is responsive and scales within the size of the navbar? Right now I have solved this by specifying height in the image style, but I suspect there is a better way to do this. Thanks!

Kamil Paciepnik free answered 5 years ago


Hi jbankster.web, thanks that you found an interesting solution. Good job! Regards

jbankster.web pro answered 5 years ago


Hi Gcrossan,
Q. What is the recommended way to style an image such that it is responsive and scales within the size of the navbar?
First make the image to the largest size you will need. When we make it responsive, it will scale down "nicely" in size as media breakpoints are encountered. If the image source is declared within the html markup: When specifying images within the html markup that you want to act responsively, "do not" declare width or height values within the image element. Instead... do the following. Adding the BS4 builtin "img-fluid" class to your img elements will make them responsive. Example: <img src="my-navbar-image.png" class="img-fluid" alt="My responsive image."> Cite: http://v4-alpha.getbootstrap.com/content/images/ Josh

Kamil Paciepnik free answered 5 years ago


Hi gcrossan, the best solution will be to create an image with the appropriate dimensions. Regards

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags