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

Can you explain the significance of the "style.css?ver=1" tag?

Recently, I noticed that certain websites incorporate a CSS tag such as style.css?ver=1. Can you explain the significance of this? What exactly is the purpose of adding ?ver=1 to the CSS tag? Could you provide instructions on how to implement this in cod ...

cssversion

I am faced with the puzzling situation where the value of my input type slider is displayed below the slider

I am currently working with HTML code that allows users to select a percentage using an input type range. Here is the code snippet I am using: <div class="container-fluid"> <div class="row"> <div class="c ...

htmlcssvertical-alignment

Using the PMT function in PHP allows for easy calculation of

I have been attempting to integrate the PMT function into my PHP code for a loan calculator. Unfortunately, the PHP code seems to be malfunctioning and I am unsure of the reason, especially since I am still at the novice level in programming. PHP(Get.php ...

phphtml

Having trouble with Angular JS's ngRoute feature not functioning properly

I've been struggling with my ngRoute implementation. I seem to be unable to load the 'ngRoute' module for some reason. Whenever I run this code, I just end up with a blank page. Below is my app.js file: var app = angular.module('tutor ...

javascripthtmlangularjs

What is the best way to show the logged-in user's name with PHP?

After a successful login, I want to display a personalized greeting message to the user in PHP (e.g. "Hey User!"). However, the code $username = $_SESSION['username']; is not retrieving the username properly and displays nothing (Hey !). Here ...

phphtmlphpmyadmin

Learn how to utilize ng-class to assign an ID selector to HTML elements

In my code, I have an icon that is displayed conditionally using ng-class. I am looking to include ID's for both the HTML elements. <i ng-show="ctrl.data.length > 1" ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen, ...

htmlcssangularjsangularjs-ng-class

Click on the entire table to be redirected to the specified link

Currently, I am facing an issue with styling my tables as links. I have 3 tables and I want each table to be a clickable link. However, after implementing the links, I am unable round the corners of the tables. I envision the final look to be similar to t ...

htmlcss

Deactivate the dropdown menu without triggering any event

I am working on a JSP page and I need to find a way to disable a dropdown list without using an onclick method or event in the dropdown menu itself. <% boolean condition = true; if(condition){ // Here, I need to access 'plc1' ...

javahtmlscriptlet

What is the best way to prevent the contents of the First Column from spilling over into the Second Column using CSS

Currently, I am working on the CSS for two column sections: section one and section two. My goal is to have the first column of section one occupy the available space without overflowing into the second column, as illustrated in this image. The content hi ...

htmlcss

Different sizes of CSS tables

Creating a responsive layout involves displaying <div> boxes within a grid: The six individual boxes on this page are placed in a row within the HTML source: <div class="control"> <div class="controlContent"> <a>VARIABLE-HEIGHT CO ...

htmlcssresponsive-designcss-floatcss-tables

Please select the option to choose all values

Currently, I am working on implementing a select option feature on my webpage. I have integrated PHP into it to ensure that the selected option remains unchanged after submission. My goal is to include a value of "any" so that when the user chooses "ANY," ...

javascriptphphtml

Unable to choose anything beyond the initial <td> tag containing dynamic content

Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...

javascripthtmljqueryajax

The background image is not displaying correctly in the tag td

I'm struggling to display a background image inside a table data cell using CSS. <td class='details-control'></td> When I use the following CSS rules, the image is not displayed: td.details-control { background: url(http:// ...

jquerycsshtml

Get the maximum width in pixels through JavaScript when it is specified in different units within the CSS

I'm looking to retrieve the max-width value in px from CSS for use in a JavaScript code. The challenge is that this value might be specified in different units in the CSS file. Any suggestions on how to achieve this using JavaScript? const element = ...

javascripthtmlcss

What is the best way to position the hamburger menu icon on the right side of the header?

I need some assistance with adjusting the position of my mobile hamburger menu icon. It's currently on the left side of the screen, but I want to move it to the right. I've tried making the changes myself using CSS and HTML, but I'm not an e ...

htmlcsshamburger-menu

Activate month input programmatically

Having an issue trying to open a month popup using jQuery trigger. I have a button and an input of type month, but when the button is clicked, the popup does not open as expected. You can find the fiddle for this question here. $(document).ready(functio ...

jqueryhtml

Error: Unable to assign value to the innerHTML property of an undefined element created by JavaScript

When designing my html form, I encountered an issue where I needed to display a message beneath blank fields when users did not fill them out. Initially, I used empty spans in the html code to hold potential error messages, which worked well. However, I de ...

javascripthtml

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

"Can we have selection options or drop-down menus that are in line with today

Currently working on a website project for a client where I, as a designer learning to code, have integrated three select options. This is how it appears: The client's new requirement is that the arrival date should automatically display as the curr ...

phphtml

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js