How come the image height isn't working in a bootstrap column?

Why is the tomato picture taller than the others even though I specified the height and width? It must be something simple:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
    <div class="row">
      <div class="col-md-4">
        <a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a>
        <div class="caption text-center">Weather App</div>
</div>
      
      <div class="col-md-4">
        <a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a>
        <div class="caption text-center">Weather App</div>
      </div>

      <div class="col-md-4">
        <a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a>
        <div class="caption text-center">Recipe Book</div>
      </div>
    </div>
</div>

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

due to the use of .img-responsive and .img-thumbnail classes in CSS, which enforce a max-width:100%, the width/height tags in the HTML are overridden

Additionally, it is recommended not to specify width/height using HTML tags

To maintain the same height while preserving aspect ratio, you can utilize the following approach:

.row img {
  max-height: 120px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-4 col-md-4 text-center">
      <a href="#">
        <img src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" class="img-responsive projects img-thumbnail">
      </a>
      <div class="caption">Weather App</div>
    </div>

    <div class="col-xs-4 col-md-4 text-center">
      <a href="#">
        <img src="http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg" class="img-responsive projects img-thumbnail">
      </a>
      <div class="caption">Weather App</div>
    </div>

    <div class="col-xs-4 col-md-4 text-center">
      <a href="#">
        <img src="http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg" class="img-responsive projects img-thumbnail">
      </a>
      <div class="caption">Recipe Book</div>
    </div>
  </div>

Answer №2

To modify the dimensions of an image in css and overwrite bootstrap, use the following code:

.img-thumbnail{
  width: 230px;
  height:230px;
}

Answer №3

I suspect that the issue lies with bootstrap's responsive images causing the problem. You can try to override it in your CSS code like this 

img {
  width: 230px !important;
  height: 230px !important;
}

Fiddle Link

Answer №4

If you're looking to enhance your design, consider swapping out the <img> tags for background images instead. Don't limit yourself to just Bootstrap - you can always customize styles to better suit your needs.

Using background images allows for easy cropping without distorting the original image proportions.

.projects.img-thumbnail[style] {
  width:100%;
  height:200px;
  background-size:cover;
  background-position: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-xs-4">
    <a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg)" class="img-responsive projects img-thumbnail"></span></a>
    <div class="caption text-center">Weather App</div>
    </div>

  <div class="col-xs-4">
    <a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg)" class="img-responsive projects img-thumbnail"></span></a>
    <div class="caption text-center">Weather App</div>
  </div>

  <div class="col-xs-4">
    <a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg)" class="img-responsive projects img-thumbnail"></span></a>
    <div class="caption text-center">Recipe Book</div>
  </div>
</div>

Creating a square shape with background images may require some additional CSS work using ::before or ::after pseudo selectors.

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

Modifying the color of Bootstrap icons

When I use PHP code to print this icon into a table, it looks like this: echo '<button Onclick="" style="border: none; background: none; color:green"><a title="Reenviar" data-toggle="tooltip"><i class="material-icons">&#xE0BE;&l ...

htmlbootstrap-4

Creating fixed values in HTML

I need to maintain consistency in the headings of multiple tables spread across 3 HTML pages. The heading structure is as follows: <thead> <tr> <th>MyHeading</th> </tr> </thead> My goal is to store the string MyHeadin ...

javascripthtmlconstants

Tips for showing both label and value on a pie slice in Apex charts

I am currently utilizing apex chart within an angular application to showcase charts. I am specifically focusing on a pie chart and aiming to customize it by displaying labels on the values within each slice of the pie, similar to what is shown in the atta ...

javascriptjquerycssangularapexcharts

Instructions for utilizing float:left and list-style-type within HTML are as follows: I am currently experiencing issues with implementing the float:left and list-style-type properties in my code

I'm attempting to align a button list to the left using the float: left property and also remove list styles, but for some reason it's not working as expected. //CSS #tus{margin:5px;padding:0;width:640px;height:auto;} #tus ul{margin:0px;padding: ...

javascripthtmlcss

Maintain the vertical alignment of an item at a fixed point, even as the height of the

I'm currently working on a multi-step form project with three tabs, each containing a different section of the form and varying heights. The challenge I'm facing is to center the tallest tab vertically on the page, while aligning the other two ta ...

htmlcssformscss-gridresponsive

What could be causing my PHP script to not input the data correctly? Is there something I am overlooking?

I'm facing a puzzling issue where my website fails to insert data into the database despite setting up all the necessary columns and configurations. The problem might be related to the radio buttons and the "Preke" tag. If you spot any mistakes in my ...

phphtmlmysqldatabase

Vuetify Autocomplete that allows for adding values not in the predefined list

I am utilizing a vuetify autocomplete component to showcase a list of names for users to select from. In the case where a user enters a name not on the list, I want to ensure that value is still accepted. Check out my code snippet below: <v-autocomplete ...

javascripthtmlnode.jsvue.jsvuetify.js

What are some ways to create a table that can be easily filled in?

I'm striving to enhance the user experience by allowing a table cell to be easily editable with just a double click, converting it into an input field with the existing cell value pre-populated. Currently, I have successfully achieved this functional ...

htmlangularjsuser-interfacehtml-table

The combination of jQuery and HTML FormData triggers an error message of "Uncaught TypeError: Illegal invocation."

I have been utilizing a particular script to upload my image files. You can find the script here: http://jsfiddle.net/eHmSr/ $('.uploader input:file').on('change', function() { $this = $(this); $('.alert').remove(); $ ...

jqueryajaxhtmlupload

Flexible layout of perfectly square elements

I am currently working on creating a responsive grid layout consisting of squares that are positioned absolutely within their parent element. The goal is to ensure that when the page is resized, the squares scale proportionally with their parent container ...

javascripthtmlcss

Adjust the height of a div using jQuery once the AJAX call retrieves the data

There is a div that always matches the height of the adjacent div, depending on the content loaded in it. This setup was functioning properly until I implemented a search feature using jQuery. Now, when I perform a search, the element used in the jQuery ca ...

javascriptjquerycssajax

Implementing a Custom CSS Theme in JavaFX

Hey everyone, I stumbled upon this amazing JavaFX theme called Flatter on . I've been attempting to implement it for a couple of hours now, but I'm struggling with the process. Can someone provide me with a detailed guide on how to activate thi ...

cssnetbeansjavafx

When the user hits the enter key, automatically submit a form without the need for

Is it possible to submit a form on enter using type="button"? Here are my input fields: <input type="text" id = "login-user" class="form-control log-input" placeholder="Username" required="required"> <input type="password" id="login-password" clas ...

javascripthtmljquery

Activate single elements one at a time

If you want to understand the question better, take a look at my code on jsfiddle. Each Div contains only one link. When you click on the link, it sets the Div to active and shows a hidden Div within it. Clicking the link again toggles the active style an ...

javascriptjqueryhtmlcss

If additional content has been included in the `div`, be sure to scroll all the way down to view it

I have a div that needs to automatically scroll to the bottom when new content is added. This is a common feature in chat applications where the user wants to see the latest messages without having to manually scroll down each time. How can I achieve this ...

javascripthtmlcss

Differences between JavaScript's window.onload and body.onload functionsWhen

My inquiry is similar yet slightly distinct from the one queried here: window.onload vs <body onload=""/> The comparison in that prior query was between utilizing window.onload and inline js. My question pertains to the disparity between ...

javascripthtmlcss

Removing the border from a button in CSS and HTML

Looking to build a sleek and stunning website, but struggling with removing button borders. Any help would be greatly appreciated! If you'd like to check out the issue, visit this link: https://i.sstatic.net/daaec.jpg. I'm aiming for no button o ...

htmlcss

Using Jquery to create a simple filter system that allows checkboxes to remain checked

I am currently working on a basic filter system where I need HTML checkboxes to display and hide items based on specific categories. However, the issue I am facing is that the checkboxes remain checked regardless of the selection. For example, you can se ...

jqueryhtmlformsfiltercheckbox

Eliminate border around image link

I can't figure out what I'm doing incorrectly... I included some CSS code a:active {text-decoration: none; border: 0px solid black} a:link {text-decoration: none; border: 0px solid black} a:visited {text-decoration: none; border: 0px solid black ...

htmlcss

Prevent images from overlapping in Bootstrap 4 carousel

I am working on a project using bootstrap 4. In my carousel design, I want to add another image layer at the bottom of the main image, but the code I have written is not displaying the new image in the correct position. Do you have any suggestions on how t ...

htmlcssbootstrap-4