当前位置：首页 > news >正文

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

news 2024/9/23 15:05:42

图片的处理

图片等比例缩放

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;（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)

查看全文

http://www.mrgr.cn/news/34161.html