Adjust photo size using bootstrap framework

I'm currently facing an issue with trying to add a logo to my navbar and resize it using the img-responsive class in Bootstrap. However, the image is not resizing as expected, and I want to avoid manually changing its size.

/*
#logo-image {
  height: 50px;
}

*/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top" style="background-color: #bc001d">
  <div class="container">
    <a class="navbar-brand" href="/">
      <img id="logo-image" class="img-responsive" alt="Logo" src="https://dummyimage.com/200x200" /></a>
  </div>
</nav>

htmlcssbootstrap-4

Answer №1

One way to make images in Bootstrap 3 responsive-friendly is by adding the .img-responsive class.

This class applies max-width: 100%;, height: auto;, and display: block; to the image, allowing it to scale nicely within its parent element.

If the container of the image has no fixed width, the image will scale to max-width: 100%, resulting in a larger size than intended.

Another issue arises when the navigation bar has no fixed height, causing the logo to remain at its original size and affecting the layout of the header.

To address this problem, either define the size of the header and all children below it or use the h-100 class on the image and its parent elements. Alternatively, specify a width for the parent container of the image so that the .img-responsive class can function effectively.

In order for BOOTSTRAP to resize the images responsively, it needs to know the maximum size they can occupy.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top" style="background-color: #bc001d; height: 50px;">
  <div class="nav_container h-100">
    <a class="navbar-brand h-100" href="/">
      <img id="logo-image" class="h-100" alt="Logo" src="https://dummyimage.com/200x200" /></a>
  </div>
</nav>

Answer №2

Would it be possible to include a screenshot for reference? I attempted to implement your code on my Bootstrap website and it functioned perfectly. Perhaps consider utilizing max-height:50px; width: auto; in place of height to maintain responsiveness.

Answer №3

When working with Bootstrap, it is recommended to use the class .img-thumbnails

However, using css, you can achieve similar results by utilizing the following code:

.img-brand{
height:50px;
width:50px;
object-fit:contain;
}

Answer №4

It is advisable to set the width in percentage, so that the image will resize according to the container width!

    .img-responsive{
width:25%
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript code to toggle the navigation bar on mobile devices

I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

What are the steps for utilizing the skrollr library to manipulate text within a div without it being

I'm a beginner in html, css, and javascript and I'm trying to create my first one-page website using the skrollr library. However, I'm facing an issue where the content in my second div is not displaying properly and is hidden behind the fir ...

javascripthtmlcss

Achieve equal distribution of divs with a specified size

After searching through various questions, none of the answers provided a solution that worked for my specific situation. Within my project, I have a series of divs, each with a fixed width of 210px. The container holding these divs is able to resize bas ...

htmlcss

Struggling to align the h1 tag with a p tag on the same line

How can I align the balance to the upper right-hand corner of my website? I'm new to HTML and CSS and struggling to get the p tag next to the h1 tag. I've tried using display inline for the h1 tag and float right for the p tag, as well as setting ...

javascripthtmlcss

Creating a custom colored progress bar in Angular 2 using Bootstrap 4

I've been working on implementing a bootstrap progress bar with ng-bootstrap components. The documentation outlines 4 preset coloring options using the directive "type": "success", "info", "warning", or "danger". () To customize the colors, I made ad ...

angularbootstrap-4ng-bootstrap

Using a CSS gradient with a variable in React.js - A guide to implementation

Looking to incorporate the following CSS property into the Navlink component. In the CSS file, the property is usually written like this using gradient. .ele { background-image: linear-gradient(45deg, #808080 25%, transparent 25%), li ...

javascriptcssreactjsreact-hookscss-gradients

Display a single button on hover in Angular 2+ framework

I'm looking to have the 'Edit' button only appear when I hover over a selected row. Here's the code: https://stackblitz.com/edit/inline-edit-change-edit2-j8b2jb?file=app%2Fapp.component.html I want the 'Edit' button to show u ...

javascripthtmlcssangular

Generating HTML using a filter

I have been working on creating a filter that will render HTML tags. Here is the code for my filter: filters: { limitStrLength: function (value, maxLength) { if (value && value.length > maxLength) { let partialVal = value.substr(0, ...

javascripthtmlvue.jsvuejs2vue-filter

The challenge with linking within Layerslider

Having some trouble with an external link to a specific layerslider slide (html version, NOT wordpress). Here is the webpage in question: After reaching out in the support forum, I was advised to use this javascript: <a href="javascript:void(0);" onc ...

javascriptjqueryhtmlslideshowdeep-linking

Prevent clicking on the <div> element for a duration of 200 milliseconds

I need to make this box move up and down, but prevent users from clicking it rapidly multiple times to watch it go up and down too quickly. How can I add a 200 millisecond delay on the click or disable clicking for that duration? View the jsfiddle example ...

javascriptjqueryhtmlcss

Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

I am trying to print from my Vuejs component and apply CSS and Bootstrap styles to the printed page. Currently, I am using window.print() inside the mounted lifecycle hook as shown below: export default { mounted() { ...

javascriptcssvue.jsbootstrap-4

Looking to establish a minimum height for a webpage

I am working on creating a webpage with three distinct sections: A fixed height header A fluid main section A fixed height footer My goal is to ensure that the page has a minimum height so that the bottom of the footer aligns with the bottom of the wind ...

javascripthtmlcss

ReactStrap: Difficulty concealing navbar item based on screen dimensions

Currently, I am referring to the official documentation to implement a scenario where a NavItem is only displayed for screen sizes greater than sm. As per the guidelines provided in the documentation, I have included the following attributes: https://i ...

htmlcssreactjsbootstrap-4reactstrap

gulp failed to compile the Sass file

I recently made the switch from using less to sass in my project. I went ahead and installed gulp-sass using npm and updated my gulpfile to compile sass instead of less. However, despite making these changes, gulp is not compiling my .scss file to css. I&a ...

cssnode.jssassnpmgulp

The data insertion query in MYSQL seems to be malfunctioning

I am facing an issue with inserting data from a form into a database table named "sumation". Despite using PhpStorm IDE, I am getting errors indicating that no data sources are configured to run the SQL and the SQL dialect is not set up. Can anyone help ...

javascriptphphtmlmysql

Curves are unable to form on borders using the border-radius property

While working on a webpage, I encountered an issue with CSS attributes and table borders. Despite using the border-radius attribute, the border didn't round along with the background; it just stayed at a corner. Below is my code snippet, any help is g ...

htmlcsshtml-table

The Foolish Mistake: Undetermined Dollar Sign

Can someone please help me with this issue? I've searched everywhere but I can't seem to fix the "Uncaught ReferenceError: $ is not defined" error. I have rearranged my script, tried putting it at the bottom, but nothing seems to work. Any sugges ...

javascriptjqueryhtml

Having trouble loading IE with jQuery isotope

Encountering a common issue on an unfamiliar browser, many still face the challenge. Setting up an isotope grid on websites seems to function seamlessly across various browsers, except for when testing in Internet Explorer using . In this case, the layout ...

jqueryhtmljquery-masonryjquery-isotope

Issues with AngularJS UI Router functionality are being experienced specifically on localhost

What is causing the discrepancy in UI-Router functionality between JSFiddle and localhost? The localhost link is http://127.0.0.1:54046/preview/app/index.html. Have I overlooked something crucial here? There are no visible JS errors present in the console. ...

javascripthtmlangularjsangular-ui-router

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

csstwitter-bootstrap