Question

当用户在他/她的手机上时，图像会变形，宽度会改变，但高度不会。

我不确定我应该改变什么，我尝试添加最大高度，但这似乎并不像我认为的那样有效。

我还要指出我正在使用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

只需更改一个维度并将另一个维度设置为自动，例如：

width:150px;
height:auto;

如何在ul，li标签中保留img元素的宽高比？

2 个答案: