图片的处理
图片等比例缩放
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
-
<svgxmlns="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;（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)
-
