如何在调整大小期间保持图像比例

Question

我有一个带有语义ui的列表构建的示例html页面。 当我尝试调整浏览器窗口的大小时，具有更大描述的列表项会使图像变小（屏幕截图）。

PS。我没有twitter bootstrap这个问题。

达 我没有改变很多css，只是将它添加到custom.css

.ui.tiny.images img, .ui.tiny.image { width:30px;}

其中一项：

<div class="sixteen wide column ">
  <div class="ui divided small  list">
    <div class="item">
      <div class="image">
        <img class="ui tiny image " src="examples/images/207664bebf8011e1a9f71231382044a1_7.jpg">
      </div>
      <div class="content">
        <a class="header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, quod, culpa voluptatem illo cupiditate error in minus eveniet ut impedit? Quo quia inventore assumenda </a>
        <span class="ui mini horizontal label">6.12.2014 | Comments: 10</span>
      </div>
    </div>
  </div>
</div>

谢谢！

Answer 1

.img-responsive {
    width: 100%;
    height: auto;
}

引导程序是如何处理它的。考虑进行类似的实现。

Answer 2

问题在于默认的max-width属性。

默认情况下它是max-width: 100%;

现在我有了这个：

.ui.tiny.images img, .ui.tiny.image {
   width:32px;
   max-width: none;
}