CODEWITHSUNDEEP
htmlcssimagetwitter-bootstraptwitter-bootstrap-3
Jordan Axe
Jordan Axe

Reputation: 3923

Images "pushing" others away

Basically I want to list my images on my Bootstrap page, giving column spans per image.

Right now it looks the following:

enter image description here

However if one of the images is slightly larger than the others it'll push them off ruining the view as shown below (the first image with Harry Potter is the one being too big):

enter image description here

How can I make it so bootstrap always will display each image with the same size regardless of the images original size and not shove others away as above?

Here's the HTML displaying the images:

<div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Harry Potter and the Deathly Hallows: Part 2_2011"><img src="/Images/Movies/Harry Potter and the Deathly Hallows Part 2_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Transformers: Dark of the Moon_2011"><img src="/Images/Movies/Transformers Dark of the Moon_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/The Twilight Saga: Breaking Dawn - Part 1_2011"><img src="/Images/Movies/The Twilight Saga Breaking Dawn - Part 1_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/The Hangover Part II_2011"><img src="/Images/Movies/The Hangover Part II_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Pirates of the Caribbean: On Stranger Tides_2011"><img src="/Images/Movies/Pirates of the Caribbean On Stranger Tides_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Fast Five_2011"><img src="/Images/Movies/Fast Five_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Mission: Impossible - Ghost Protocol_2011"><img src="/Images/Movies/Mission Impossible - Ghost Protocol_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Cars 2_2011"><img src="/Images/Movies/Cars 2_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Sherlock Holmes: A Game of Shadows_2011"><img src="/Images/Movies/Sherlock Holmes A Game of Shadows_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Thor_2011"><img src="/Images/Movies/Thor_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Rise of the Planet of the Apes_2011"><img src="/Images/Movies/Rise of the Planet of the Apes_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Captain America: The First Avenger_2011"><img src="/Images/Movies/Captain America The First Avenger_2011.jpg" /></a>
        </div>
</div>

Upvotes: 1

Views: 120

Answers (2)

kumarharsh
kumarharsh

Reputation: 19629

Use display: inline-block on your img elements instead.

Using inline-block, all the images which are in a line will be treated as words in a line, and won't suffer the same fate as floats.

Upvotes: 1

spacebean
spacebean

Reputation: 1554

Just create a class for the images and set the height explicitly, e.g.

.thumbnail img {
       height: 100px;
}

Upvotes: 0

Related Questions