CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfrontend
kartikeykant18
kartikeykant18

Reputation: 1811

Make image-thumbnail in bootstrap adjacent to each other and identical in size

I am making a webpage in which I want to make 2 image thumbnails appear adjacent to each other with same height. Consider my html code:

 <div class="row">
    <div class="col-md-6">
      <img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" width="640px" height="480px">
    </div>
    <div class="col-md-6">
      <img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" width="640px" height="480px">
    </div>
</div>

Corresponding to the given code in the output it shows(this is just a cropimage of the output) :

output

I cant see why the height attribute doesnt assign same height to both the images

As asked in one of the answers here is the css file:

body{
 background-color: rgb(45,45,45);
}
.page-header{
 height: 100px;
 background-color: rgb(17, 17, 17);
 margin-top: 0px;
 margin-bottom: 0px;
}

#title{
 font-size:400%;
 color: white;
 font-family: 'Oswald', sans-serif;
}

.nav-button{
 margin-top:24px;
 margin-right:50px;
 margin-left:50px;
 width:110px;
 height:55px;  
 }

.btn h3{
 margin: 0 auto;
 font-family: 'Cabin', sans-serif;
}

.about{
 background-color: rgb(175, 187, 206);
 height:300px;
 font-size:16px;
}

.container{
 margin-top:0px;
}


.body-text{
 font-family:'Cabin', sans-serif;
 padding-top:60px;
 padding-left:25px;
 font-size:175%;
}
.my-image{
 height:280px;
 width:270px;
 padding-top:20px;
 padding-right:30px;
}


.portfolio{
 height: 1200px;
}

#portfolio-heading{
 padding-top: 30px;
 color: rgb(255,255,255);
}

Upvotes: 0

Views: 1360

Answers (6)

sneha
sneha

Reputation: 445

 <div class="row">
<div class="col-md-6">
  <img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" style="height: 500px;background-size: cover;"/>
</div>
<div class="col-md-6">
  <img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" style="height: 500px;background-size: cover;"/>
</div>

Upvotes: 0

Md. Salam Mia
Md. Salam Mia

Reputation: 1

you can use this code:

div.col-md-6 {
    height:400px;
    position:relative;
    display:inline-block;
    overflow:hidden;
}

img.img-thumbnail {
    position:absolute;
    top:50%;
    min-height:100%;
    display:block;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    min-width:100%;
}

Upvotes: 0

Sam Van Eenoo
Sam Van Eenoo

Reputation: 33

The width and height attribute doesn't work on an image:

You should do this:

<div class="row">
    <div class="col-md-6">
      <img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" style="widht: 640px; height:480px;" />
    </div>
    <div class="col-md-6">
      <img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" style="widht: 640px; height:480px;">
    </div>
</div>

Better practice however is that make you own class:

<div class="row">
    <div class="col-md-6">
      <img class="myClass" src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" />
    </div>
    <div class="col-md-6">
      <img class="myClass" src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" style="widht: 640px; height:480px;">
    </div>
</div>

And make a css-file with following code:

.myClass { 
  width: 640px; 
  height: 480px;
}

I however suggest the following thing. Make sure your images have the same size in advance using an editing tool (i.e. Photoshop) and use the default img-responsive class that comes standard with bootstrap.

This will make your website more responsive which is preferred.

Upvotes: 0

Tony Hensler
Tony Hensler

Reputation: 1492

This can be done using CSS:-

https://jsfiddle.net/Lrbw117q/1/

You can also put the background image inline if you need to.

#box1 {
  background-image: url('http://i.imgur.com/Ym35iJI.jpg');
  background-size: cover;
}

#box2 {
  background-image: url('http://i.imgur.com/ot6RubY.jpg');
  background-size: cover;
}

.img-thumbnail {
  height: 640px;
  width: 480px;
  border: 5px solid red;
}

Upvotes: 2

Jishnu V S
Jishnu V S

Reputation: 8409

You can do this with flex property try the demo

.outer , .outer div {
  display:flex;
}
<div class="row">
<div class="outer">  
    <div class="col-md-6 col-sm-6 col-xs-6">
      <img src="http://i.imgur.com/Ym35iJI.jpg" alt="frontend" class="img-thumbnail" width="640px" height="480px">
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
      <img src="http://i.imgur.com/ot6RubY.jpg" alt="webd" class="img-thumbnail" width="640px" height="480px">
    </div>
</div>  
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Upvotes: 1

Harry
Harry

Reputation: 11

I just placed your code into a fresh html file, and tested it. Both images are given the exact same height. I personally would check your stylesheet for any inconsistencies in any of the mentioned classes/IDs, or anything that could have affected its size.

You may want to check for your styling for a 'height:auto;' or the like.

My suggestion would be to put a 'overflow:hidden;' into your stylesheet "img-thumbnail" class.

To be able to successfully fix this for you, we would need to see more of your code.

Edit: Also, I may suggest that you check to see which of the divs is the incorrect height. In chrome, this can be done by inspecting element (right-click > inspect element), navigating to the code in question, and hovering over it. This should hopefully determine your issue.

Upvotes: 1

Related Questions