html - 缩小图像并保持纵横比

标签 html css

我在下面使用的代码破坏了纵横比。我该怎么做才能始终保持纵横比不变?

<img height="25%" width="25%" src="{{ response.getPhoto() }}" />

最佳答案

取自Bootstrap .始终保持纵横比的完全响应式图像。

CSS

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

HTML

<div style="width:100px;">
  <img class="img-responsive" src="https://placehold.it/350x150"/>
</div>

fiddle 示例:http://jsfiddle.net/wa5e6raa/

关于html - 缩小图像并保持纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31196919/

相关文章:

html - 侧面菜单,不显示页面的顶部到底部,仅在页眉/页脚之间显示

javascript - pagify.js 正在将我的索引页面内容添加到其他页面

html - 当父 div 随机调整大小时,文本溢出不起作用?

html - 如何使用溢出自动使页眉和页脚之间的 div 高度自动

html - 带有堆叠图像的 Bootstrap 列 : need to have same column height

javascript - 如何在 CSS 中设置默认颜色?

html - 高度没有达到 100%

javascript - 不要在 Android 上加载时间流音频

javascript - 如果元素为 :hidden or :visible,则更改 <button> 文本

javascript - 如何在PHP中选择带有连接表的记录