如何在ul, li标签中保留img元素的长宽比

Question

当用户使用手机时，图像会失真，宽度改变，但高度不变。

我不确定我应该改变什么，我试着添加一个max-height，但这似乎不工作，因为我认为它会。

我还想指出，我正在使用CSS Bootstrap。

<ul style="position: absolute; max-width: 625px; list-style-type: none; margin: 0 auto;" class="username">';
  <li style="list-style-type: none; margin:0; padding:0;">
    <img style="height: 360px" class="img-thumbnail" src="filename" />
  </li>
</ul>

Answer 1

看起来你只是在定义高度，试着把它改成:

<ul style="position: absolute; max-width: 625px; list-style-type: none; margin: 0 auto;" class="username">';
  <li style="list-style-type: none; margin:0; padding:0;">
    <img style="height: 360px; width: 360px (or however wide your image is)" class="img-thumbnail" src="filename">
  </li>
</ul>

自关闭标签在HTML5中也不再有效，所以我也删除了

Answer 2

只需改变一个维度并将另一个设置为auto，例如:

width:150px;
height:auto;