如何实现SVG图片居中且宽度不随屏幕缩小而压缩

问题根源 #

1. 伪元素宽高使用了em单位，em会继承当前.rating元素的字体大小，响应式场景下如果字体大小变化、或者父容器宽度被压缩，伪元素的宽高会随之改变，导致作为背景的SVG星星被挤压缩放。
2. 伪元素未设置水平居中规则，默认左对齐，搭配background-repeat: space属性时，容器宽度变化会自动调整星星之间的间距，视觉上就会出现左右偏移的问题。
3. 媒体查询中给.rating::before新增的max-width: 300px和基础样式的固定宽度冲突，会导致宽屏场景下伪元素尺寸异常。

解决方法 #

1. 调整基础CSS样式

把伪元素的宽高换成固定的px单位，添加居中规则，优化背景图属性：

.rating {
text-align: center;
background-color: var(--light-grayish-magenta);
color: var(--very-dark-magenta);
font-weight: 700;
border-radius: 7px;
max-width: 26em;
margin-left: auto;
margin-right: auto;
}

.rating::before {
content: '';
/* 按你的SVG实际尺寸调整，这里假设单颗星18px宽，5颗总宽90px，高18px */
width: 90px;
height: 18px;
display: block;
/* 左右auto实现水平居中，保留底部7px边距 */
margin: 0 auto 7px;
background-image: url(images/icon-star.svg);
/* 固定不重复，避免宽度变化时调整星星间距 */
background-repeat: no-repeat;
/* 背景图自适应容器尺寸，不会缩放变形 */
background-size: contain;
background-position: center;
}

2. 精简媒体查询代码

删除冲突的重复属性，如果需要大屏端星星和文字左右排列，可以新增flex布局规则：

@media screen and (min-width: 21.885em) /* breakpoint 350px phones ---> tablets */ {
.status {
    max-width: 20em;
    margin-left: auto;
    margin-right: auto;
}
.rating {
    padding: 0.9em;
    /* 可选：大屏端星星左、文字右的布局 */
    display: flex;
    align-items: center;
    gap: 1em;
}
/* 如果用上面的flex布局，添加这段让星星左对齐，不需要居中 */
.rating::before {
    margin: 0;
}
}

修改后测试不同屏幕宽度，星星会始终保持固定尺寸，小屏上下居中展示，大屏按需求可以调整为左右排列，不会出现缩放和偏移问题。

内容的提问来源于stack exchange，提问作者user17422389