html – 保持纵横比的裁剪图像

概述我有一个包含文字的图像列表,但我收到的图像有不同的尺寸(全部大于150像素).我需要将它们全部裁剪为150x100px但保持正确的宽高比.有人可以建议解决这个问题的最佳方法吗？谢谢！ HTML： <ul> <div class="post" id="post"> <div> <li> <img class="TextWrap" src 我有一个包含文字的图像列表,但我收到的图像有不同的尺寸(全部大于150像素).我需要将它们全部裁剪为150x100px但保持正确的宽高比.有人可以建议解决这个问题的最佳方法吗？谢谢！

HTML：

<ul>            <div  ID="post">    <div>        <li>        <img  src="{{ picture }}">        <a href="{{ link }}">{{ message }}</a><p>        {{ time }}        </li>       </div></ul>

CSS：

.post {    wIDth: 500px;    margin-top: 15px;    float: left;}.post img {    wIDth: 150px;    height: 100px;    margin-bottom: 15px;    margin-right: 20px;}.textwrap {    float: left;}

解决方法 只要您不想要服务器端裁剪,您可以添加以下CSS：

.post img {    object-fit: cover;}

请检查object-fit的更多可能值

总结

以上是内存溢出为你收集整理的html – 保持纵横比的裁剪图像全部内容，希望文章能够帮你解决html – 保持纵横比的裁剪图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。