React组件中图片缩放异常、定位偏移及圆角失效问题修复求助

问题根源 #

1. 原代码用right:20vw的固定视窗单位定位图片，不同屏幕下偏移量不合理，且丢失绝对定位属性后布局逻辑混乱
2. 容器是flex垂直布局，却没利用flex特性实现图片靠右，反而依赖脱离文档流的绝对定位，导致布局冲突
3. 小屏幕下图片圆角消失，是因为图片溢出容器范围，容器未设置overflow:hidden截断溢出内容

修改后的代码 #

JSX 结构

<div className={styles.container}>
  <div className={styles.title}>{title}</div>
  <div className={styles.about}>{about}</div>
  <img src={image} alt={title} className={styles.image} />
</div>

样式代码

.container {
  width: auto;
  @include flex(column, center, flex-start);
  padding: 3rem 10rem;
  background: #2697fe;
  border-radius: 1rem;
  margin: 1rem;
  overflow: hidden; /* 防止内容溢出导致圆角失效 */
}

.image {
  border-radius: 1rem;
  height: auto;
  align-self: flex-end; /* 利用flex布局实现图片靠右 */
  max-width: 80%; /* 确保图片尺寸小于父元素，可按需调整 */
}

/* 响应式适配小屏幕 */
@media (max-width: 768px) {
  .container {
    padding: 2rem 1.5rem; /* 减小内边距避免内容拥挤 */
  }
  .image {
    max-width: 100%; /* 小屏幕下图片占满可用宽度 */
  }
}

关键调整说明 #

• align-self: flex-end：在flex垂直布局（column）中，该属性让图片在水平方向自动靠右，无需绝对定位，避免脱离文档流的布局问题
• overflow: hidden：给容器添加此属性，确保容器内元素不会超出圆角范围，彻底解决小屏幕下圆角消失的问题
• 响应式媒体查询：调整小屏幕下的容器内边距和图片宽度，保证不同尺寸设备下的显示效果
• 移除绝对定位与固定偏移：摒弃right:20vw这类不合理的定位方式，改用flex原生特性实现布局需求

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