新闻列表缩放永远不变形方法(超详细)

原创已于 2023-08-16 14:47:23 修改 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5

于 2023-01-04 15:42:48 首次发布

CSS 专栏收录该内容

11 篇文章

订阅专栏

文章介绍了创建新闻列表的两种方法，特别是推荐使用弹性布局。通过设置外层盒子为display:flex，保持图片重点展示，利用background-size:cover和background-position:centercenter确保图片不变形。同时，将右侧盒子宽度设为0并使用flex-grow:1来填充剩余空间，完成列表的响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

咱们先看一下新闻列表效果图

一般新闻列表布局无非就两种方法: 浮动和弹性布局(我更倾向于弹性布局)

1.外层大盒子设置display: flex

2.左边图片是重点,有的小伙伴页面一收缩图片就变形了,接下来我告诉你们一个超级实用的方法.

图片外层加个盒子,然后设置宽高;给这个盒子加背景图片,背景图片铺满盒子并且永远显示在中间.

.leftBox {
    width: 180px;
    height: 130px;
    background: url(img/1.png) no-repeat;
    background-size: cover;
    background-position: center center;
}

3.最后一步右边的盒子宽度设为0,加个flex-grow: 1占满剩余空间即可.

.rightBox {
    width: 0;
    flex-grow: 1;
    -webkit-box-flex: 1
}

大功告成!