CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Hunterisabeast
Hunterisabeast

Reputation: 49

How do you keep images (of varying size) inline with text?

I'm working on a bootstrap website and want to make the mobile version first. I'm trying to keep images (on the left) inline with text (on the right). I've managed it pretty well with square pictures (1:1 aspect ratio) but as soon as I try a different size everything is distorted. Here's an example of my code. 

<div class="container">
<div class="row">
    <div class="col-xs-4">
        <img src="image.jpg" class="img-responsive">   
    </div>

    <div class="col-xs-8">
            <ul class="list-unstyled invinfo">
                <li class="heading"><h5>Main title of page</h5></li>
                <li>Some details about the page</li>
                <li>More details</li>
            </ul>    
    </div>
</div>
</div>

The best way to describe what I'm looking to make is amazons mobile app (the results when you search for something).

Upvotes: 0

Views: 44

Answers (1)

Asons
Asons

Reputation: 87191

I would start with something like this, setting a fixed width for image and let text decided height.

For convenience I added the inline style background-image, so all content can be handled in the markup.

The great with doing like this is that it doesn't matter if the image is high/narrow or low/wide, it will still scale and keep its ratio.

.container {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #ccc;
  vertical-align: top;
  height: 140px;
}
.cell.image {
  width: 140px;
  height: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; 
}
.cell.image img {
  max-width: 100%;
  width: auto;
  height: 100%;
}
<div class="container">
  <div class="row">
    <div class="cell image" style="background-image: url('http://placekitten.com/450/300')">      
    </div>
    <div class="cell text">
      <ul class="list-unstyled invinfo">
        <li class="heading"><h5>Main title of page</h5></li>
        <li>Some details about the page</li>
        <li>More details</li>
      </ul>    
    </div>
  </div>
  <div class="row">
    <div class="cell image" style="background-image: url('http://placekitten.com/300/450')">      
    </div>
    <div class="cell text">
      <ul class="list-unstyled invinfo">
        <li class="heading"><h5>Main title of page</h5></li>
        <li>Some details about the page</li>
        <li>More details</li>
      </ul>    
    </div>
  </div>  
</div>

Upvotes: 1

Related Questions