图片和文本的一些处理方案——图片等比例缩放、背景图片调节、文本溢出

图片的处理

图片等比例缩放

1. 使用 max-width 和 height: auto

img {
  max-width: 100%; /* 限制宽度不超过父容器的宽度 */
  height: auto;    /* 高度自动调整，保持比例 */
}

2. 使用 object-fit: contain

img {
  width: 100%;          /* 让图片宽度与容器一致 */
  height: 100%;         /* 让图片高度与容器一致 */
  object-fit: contain;  /* 图片等比例缩放并保持完整显示 */
}

3. 使用 aspect-ratio（现代浏览器支持）

img {
  width: 100%;
  aspect-ratio: 16 / 9;  /* 例如16:9的宽高比 */
}

4. 使用 background-size: contain (针对背景图)

.container {
  background-image: url('image.jpg');
  background-size: contain; /* 背景图等比例缩放 */
  background-repeat: no-repeat;
  width: 300px; /* 容器宽度 */
  height: 200px; /* 容器高度 */
}

svg的使用

• 内联SVG

  • <svg
    	xmlns="http://www.photo.img"
    	viewBox="0 0 24 24"
    	width="100"
    	height="100"
    </svg>
    

• 引用外部svg文件

  • <img :src="svgPath" :style="svgStyle" alt="SVG Icon" />
    

svg可以调节亮度：

filter: brightness(100%);

背景图样式调节

    /* 加载背景图 */
    background-image: url("/@/assets/icon/slider_progress_icon.png");
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;

    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    background-color: #464646;

采用简写

          background: url("/@/assets/bg/loginBg_2.png") no-repeat center center;
          background-size: 100% 100%;

文本溢出

• 单行文本溢出显示省略号

  • overflow: hidden;（文字长度超出限定宽度，则隐藏超出的内容）
    white-space: nowrap;（设置文字在一行显示，不能换行）
    text-overflow: ellipsis;（规定当文本溢出时，显示省略符号来代表被修剪的文本）
    

• 多行文本溢出省略号

  • -webkit-line-clamp: 2;（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）
    display: -webkit-box;（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）
    -webkit-box-orient: vertical;（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
    overflow: hidden;（文本溢出限定的宽度就隐藏内容）
    text-overflow: ellipsis;（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)