搜索
  • CSS如何实现宽固定，高度如果小于某个高度则自适应，超过则隐藏超过部分
  • 发布于 2天前
  • 31 热度
    3 评论

如题，我在做一个文章列表系统时需要显示文章的缩略图，但是用户上传的图片有高有低，我现在想实现图片的宽度固定，高度如果按宽度等比缩小后高度小于某个值则按自适应的高度显示，如果高度等比缩小后依然超过某个值，比如100px，则把超过的高度隐藏掉。如下图，图片太高了，我想把红线下半部分隐藏掉该如何实现？

用户评论
  • 我没那么帅

  • 你可以在img外面包一个div,div设置固定的宽和高，超出部分用hidden隐藏起来，然后把图片的宽度设置成100%铺满div就可以了，类似如下： 

    .blog-thumbnail
{
    width:15%;
    float:right;
    border-radius:5px;
    overflow:hidden;
    height:100px;
    
}
.blog-thumbnail img{
    width:100%;
    float:left;
    display:inline;
}

  • 2025/6/11 9:00:00 [ 0 ] [ 0 ] 回复
  • 若如初见
  • 飛雲  2025-06-11 08:53

    直接使用 max-height 和 overflow啊，如下： 

    .element {
  max-height: 200px; /* 设定最大高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

    这个不行啊，图片会变形
  • 2025/6/11 8:54:00 [ 0 ] [ 0 ] 回复
  • 飛雲

  • 直接使用 max-height 和 overflow啊，如下： 

    .element {
  max-height: 200px; /* 设定最大高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

  • 2025/6/11 8:53:00 [ 0 ] [ 0 ] 回复
可能感兴趣的话题