Bootstrap 4's Img-fluid class fails to properly resize images

Having a bit of trouble with my navbar setup. I want to use an image brand with img-fluid so it resizes to fit the div and remains responsive. However, instead of resizing, the image just stretches out the navbar making it huge. Here's my code:

<nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">
          <img src="assets/images/urbane-sleek.png" class="img-fluid"  alt="">
        </a>
      </nav>

    <div class="row">
        <div class="col-md-2 .d-xs-none .d-sm-none">Text...</div>
        <div class="col-md-10">Text...</div>
        
    </div>

I've tried setting max-width: 100% and height: auto in the style attribute but it doesn't seem to be working as expected. Any suggestions or solutions? Thanks!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

When using the img-fluid class, remember that it only makes the image responsive, but does not change its original size. To control the size of the image, you can either set the dimensions directly in the image tag:

<img src="assets/images/urbane-sleek.svg" class="img-fluid" height="100" width="100" id="exampleImage"alt="">

Alternatively, you can apply a CSS rule to adjust the size:

<img src="assets/images/urbane-sleek.svg" class="img-fluid" id="exampleImage" alt="">

#exampleImage {
  min-width: 10px;
  max-height: 200px;
  min-width: 10px;
}

For more details and a live example, check out this JsFiddle link.

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

The public folder in Node.js is known for its tendency to encounter errors

I'm facing an issue with displaying an icon on my website. Here is the current setup in my code: app.js const http = require('http'); const fs = require('fs'); const express = require('express') const path = require(&apo ...

javascripthtmlnode.jsexpress

Retrieve the scope object using angular.element and the $ID parameter

In order to transfer data from an angular application to scripts that operate outside of angular, I am seeking a solution since I cannot modify the code of the angular app. By utilizing Angular Batarang and NG-Inspector extensions in Chrome, I have identi ...

javascripthtmlangularjsangularjs-scope

Having trouble implementing Bootstrap Progress Bar with AJAX in webpy

I am currently working on a web application using webpy and dealing with a Bootstrap progress bar in the template HTML file. To update this progress bar dynamically, I aim to utilize jQuery AJAX calls to fetch data from the server. In order to achieve thi ...

jqueryajaxtwitter-bootstrapweb.py

Could someone please provide guidance on customizing the appearance of bs5-lightbox?

Looking for some assistance here from the experts :) Currently, I'm utilizing Bootstrap 5 along with this Lightbox library called To activate it, I'm using data-toggle="lightbox" and it's functioning flawlessly. <a href=&quo ...

cssbootstrap-5bootstrap-lightbox

The replacement of className in inline SVG is not permitted (Error: 'Cannot read property 'className.replace' of undefined')

I've hit a roadblock trying to manipulate classes within an SVG document to modify the rect elements. The code works smoothly on divs in an external document, but I've tried several other solutions as well – all listed below. I'm still rel ...

javascripthtmlcsssvg

I am experiencing issues with my datatable not functioning properly when implementing an if-else condition

expert I have successfully implemented jquery datatables on a table using CodeIgniter and SBAdmin 2 theme. I'm facing an issue where the datatables are not displaying for the user table, although they work fine for the admin table. Below is the Java ...

phpbootstrap-4datatablescodeigniter-3

Stop the border from curving along with the container's border radius

Currently, I am working on a tabs component that features a container with border radius. When a tab item is selected, it should display a bottom border. However, I'm facing an issue where the border curves along with the border radius instead of rem ...

htmlcssborderborder-radius

Utilizing the Replace function just once

I am currently using the Avada Theme on Wordpress and I am attempting to use jQuery to translate the social media privacy labels/content. Everything is working smoothly except for one issue. Below is the HTML code: function translate() { jQuery(".fus ...

javascriptjqueryhtmlwordpress

Why are my indents disappearing when I save in VS Code?

Just starting out with HTML and running into an issue where my indents keep disappearing whenever I save. Here's an example of what's happening. Before saving: After saving: I've experimented with different formatting tools and double-che ...

html

adjust the div's position based on the window's scrolling bars

Is there a way to make my div move down when the window scrolls down and up when the window scrolls up? How can I achieve this effect? ...

htmlcsspositioning

Issues arise when using ng-repeat in conjunction with ng-click

I am facing some new challenges in my spa project with angularjs. This is the HTML snippet causing issues: <a ng-repeat="friend in chat.friendlist" ng-click="loadChat('{{friend.friend_username}}')" data-toggle="modal" data-target="#chat" d ...

javascripthtmlangularjs

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

javascriptjqueryhtmlcssmousewheel

What is the best way to ensure that circles only touch each other by their edges?

Trying to align three circles touching each other has been a challenge for me. Although I have successfully managed to make two touch, the third one remains elusive. How can I ensure that all three circles are in contact with each other, especially when th ...

javascripthtmlcss

If the width is divisible by a certain value

I have a question regarding the width of my element that I want to divide by 90. If this width is a multiple of 90, I set the width of the element. If not, I move on to the next. For example, when the window width is 1000px and the element is at full widt ...

jqueryhtmlcss

Guide to invoking a jQuery function by clicking on each link tab

Below is a snippet of jQuery code that I am working with: <script> var init = function() { // Resize the canvases) for (i = 1; i <= 9; i++) { var s = "snowfall" + i var canvas = document.getElementById( ...

javascriptjqueryhtml

Creating a series of scalable svgs of uniform size in a row, enabling me to resize them based on width without disrupting the overall design

I need a row of equally sized SVGs with some text below them, like a navigation bar but larger. I almost have it working, but there are some issues with my current setup. To clarify, this is what I am aiming for: The SVGs should be responsive and scale a ...

htmlcsssvgnavbarscaling

Implementing Ajax Js to search within a specific div - reducing text overload on the page

Our e-shop on Prestashop requires an Ajax search feature to find compatible batteries and adapters on the page. Here is the code I have created: https://jsfiddle.net/fgfjo2n9/ I am facing two issues: • 1st I want the output to only display the heading ...

javascriptjqueryhtmlajaxsearch

Tips for arranging two svg elements next to each other within a larger div

Hey everyone, I've been working on some HTML and JavaScript but I'm stuck on a basic issue. I have a simple code with a div containing two inner divs, each with an SVG element equal to the size of the parent div. My goal is to have these two inne ...

htmlsvg

Tips on removing pesky favicons

Not too long ago, I purchased a domain and configured it with Wordpress. Eventually, I decided to switch to a static landing page so I uninstalled Wordpress. But now there's an unfamiliar favicon that has appeared on my site. Even after deleting all ...

htmlwordpress

How can you give a div a background without any text inside?

I am struggling to create an HTML element with a background image using CSS, but the background does not show up unless there is text inside the element. CSS - #box { background:url(.....) } HTML - <div id="box">something</div> // this w ...

htmlcss