Bootstrap 3: resizing images - why some do and some don't

Using Bootstrap 3, I have encountered an issue with resizing images. Despite both images having the ".img-responsive" class, only the first one is resizing while the second remains the same size.

HTML :

<div class="container-fluid">
    <img src="img/ea.png" class="img-responsive" id="img-center" width="700" height="229">
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 frase">
            <p>LOREM IPSUM</p>
        </div>
    </div>
</div>

<div class="container-fluid">
    <a href="#">
        <img src="img/arrow.PNG" class="img-responsive" style="margin:0 auto;" width="80px" height="65px">
    </a>
</div>

If you're curious, the id "img-center" only includes "margin:0 auto" and "margin-bottom:45vh;

htmlcssimagetwitter-bootstrapresponsive-design

Answer №1

By applying both the width and height attributes to an element, you will effectively override the default setting of width: 100% for .img-responsive.

The reason why the first image is responsive while the second one is not lies in the fact that you forgot to add px at the end of the size values for the first image. Without this unit specified, the browser is unable to properly interpret the sizing and reverts back to the original width: 100%; setting.

<img ... class="img-responsive" ... width="700" height="229">
<img ... class="img-responsive" ... width="80px" height="65px">

In order to ensure that both images are responsive, it's necessary to remove any fixed sizing attributes as shown below:

<img src="img/ea.png" class="img-responsive" id="img-center">
<img src="img/arrow.PNG" class="img-responsive" style="margin:0 auto;">

Answer №2

It appears that the issue is due to the different inline styles for width and height in both images. Removing the inline style should allow the img-responsive class to be properly applied.

First image:

<img src="http://img.freepik.com/free-photo/background-with-white-squares-free-vector_23
-2147501484.jpg?size=338c&ext=jpg" class="img-responsive" id="img-center">

Second image:

<img src="http://img.freepik.com/free-photo/background-with-white-squares-free-vector_23
-2147501484.jpg?size=338c&ext=jpg" class="img-responsive" style="margin:0 auto;" >

Feel free to check out the Working Fiddle for reference.

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

Clicking on the ajax tab control in asp.net displays a single rectangular box - how can this be removed?

When using tab control in Ajax, I encountered an issue where a blue rectangle box appeared when clicking or opening the page. How can I remove this unwanted box? ...

javascriptjquerycssasp.netajax

Is there a way to position a pseudoelement behind its parent yet still in front of its grandparent using absolute positioning?

Imagine the following scenario: <div id="one"/> <div id="two"> <div id="three"/> </div> <div id="four"/> I am trying to apply a pseudoelement to three that appears behind it but in front of two (and any other ancestors if ...

htmlcssz-indexpseudo-element

Tips for effectively utilizing an autocomplete input field with Vue that draws information from a database source

I am looking for a way to implement an autocomplete feature in my Vue application using data from a database table with over 3000 records. Here is how I am currently retrieving the data: data(){ return{ inboundRelation_Trelation_data: [], } ...

htmllaravelvue.jsaxios

Can anyone explain the strange hexagonal substance that appeared in my POST to an InMagic Textworks system?

Upon reviewing the POST request details on an Inmagic TextWorks system in Chrome developer tools, I discovered the following while delving into the POST: Form Data view source URL encoded status: mode:sort currentPage:1 querySql:[PROCESSED]c:5f:2:61:58:-6 ...

htmlformshttpencoding

Modify the fixed div's class when the user scrolls past a certain section

My page includes a fixed menu with various sections, each assigned a specific class name using data attributes (e.g. data-menu="black"). I want the fixed menu to change its class based on the section that is currently underneath it as the user scrolls. Y ...

javascriptjqueryhtmlcss

Transitioning Wordpress menu layout from horizontal to vertical

On several websites with the same template and content but different locations, only one site is experiencing menu display issues. I have attempted deleting and re-adding the menu, as well as copying it from another working site, but the problem persists. ...

htmlcsswordpress

Divide Panel Content Enclosed by a CSS Figure

Need assistance with creating a diamond shape in CSS with two sets of text on each side of a separating line inside the diamond. I've tried aligning and floating the text without luck. Any help would be appreciated. body { background-color: pink; } ...

css

Is there a collision between the text and image?

click here for image description let newLink = '<a href="' + data.response.lst[i].url + '" > <img src="/img/Group 600.svg" /> <span style=" font-size: 12px;color: #094A98; font-weight: 700;font-famil ...

htmlcss

No feedback received from JSON

Hi, I'm having trouble receiving JSON response using JavaScript. My goal is to display the JSON data as a treeview. index.html: <!DOCTYPE html> <html> <head> <title>JSON VIEW</title> <link href="https:// ...

javascripthtmljsontreeview

Having trouble getting the sorting/search function to work with a click event to display content. It seems to only work with a single item - possibly an issue with the

Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...

javascripthtmlcss

The functionality of "Priority Nav" is compromised when a div is floated

I am currently utilizing the "Priority Navigation" design technique. This means that when the viewport width is reduced and there isn't enough space for all the list-items to fit horizontally, they are moved into another nested list under a "more" lin ...

javascriptjquerycsshtmlresponsive-design

Instructions for including user ID in the URL after successfully logging in with their information

Hello everyone, I have a question and I would appreciate some help. I am attempting to ensure that when a user logs in with their credentials, their ID is passed and visible in the URL bar like this: ?id=000. I have been trying various ways but have not b ...

phphtmlmysqlhyperlink

Combine multiple values into a single input in the number field

I have a number type input field... What I am looking for is: Age-Height-Weight 20-180-80 Is there a way to ensure that users input data in this exact format and then have the final result inserted into the input field with type="number" and submitted? ...

javascripthtmljquerycssnode.js

best practices for choosing items from a dropdown menu using Angular

I have a dropdown list displaying existing tags/chips created by users in the past. However, I'm having an issue where when I select a tag from the dropdown list, it doesn't show up in my input field (similar to the Chart tag currently). I am abl ...

htmlangulartypescriptangular-material

What is the best way to trigger the onclick event before onblur event?

I have two elements - an anchor with an onclick function and an input with an onfocus event. The anchor is toggled by the input button; meaning, when the button is in focus, the anchor is displayed, and when it loses focus, the anchor is hidden. I'm l ...

javascripthtmlajax

Can you help me understand how to ensure the CSS translate feature lands in a specific div, no matter its initial position?

I'm facing a roadblock in my journey to create a card game. The issue arises at the final stage of the Translate function implementation. In this game, the player is dealt 30 cards (I've simplified it to four for ease of programming), and upon cl ...

javascriptcss

Integrate buttons for increasing and decreasing with the `<select>` element in HTML

Apologies for what may seem like a trivial question, but I am truly stuck. Despite searching extensively, I cannot find how to create a basic HTML tag with increase and decrease buttons aligned to the right. Your assistance would be greatly appreciated. Th ...

html

Center Items in Flexbox, Implementing React Material with React

In my React App, I am utilizing flexbox and React Material to align the searchbar and clear button on the same line with space between them. Here is the link for reference: CLICK HERE <div className={classes.searchBarSection}> <Paper com ...

cssreactjsmaterial-uiflexboxmaterial-design

Having trouble applying CSS styles to a class using Material UI withStyle? If you're finding that withStyle isn't working as

Check out this code snippet: import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import classNames from 'classnames'; const styles = theme => ({ myGridStyle:{ '&:.my-row-s ...

cssreactjsmaterial-uireact-with-styles

Using HTML5 data attributes as alternative configuration options in a jQuery plugin can present challenges

I am currently in the process of creating my very first jQuery plugin, and I have encountered a challenge when attempting to extend the plugin to support HTML5 data attributes. The idea is for a user to be able to initialize and adjust settings simply by u ...

javascriptjqueryhtmlscroll