Question

我正在开发一个bootstrap网站，并希望首先制作移动版本。我正在尝试将图像（左侧）与文本内联（右侧）。我用方形图片（1：1宽高比）很好地管理了它，但是当我尝试不同尺寸时，一切都变形了。这是我的代码示例。

<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>

描述我想要制作的内容的最佳方式是amazons移动应用（搜索某些内容时的结果）。

Answer 1

我会从这样的事情开始，为图像设置固定的宽度，让文本决定高度。

为方便起见，我添加了内联样式background-image，因此可以在标记中处理所有内容。

这样做的好处是，如果图像高/窄或低/宽无关紧要，它仍然可以缩放并保持其比例。

.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>

如何保持图像（不同大小）与文本内联？

1 个答案: