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

发布时间：2020-12-14 18:29:31 所属栏目：资源来源：网络整理

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

我有一个包含文字的图像列表,但我收到的图像有不同的尺寸(全部大于150像素).我需要将它们全部裁剪为150x100px但保持正确的宽高比.有人可以建议解决这个问题的最佳方法吗？谢谢！

HTML：

<ul>        
    <div class="post" id="post">
    <div>
        <li>
        <img class="TextWrap" 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的更多可能值

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!