如何用CSS实现图片适配不规则形状及首页特定尺寸布局？

核心思路 #

通过相对定位容器配合绝对定位的圆形元素，利用背景图的定位和缩放匹配主图，实现底部小圆与主图的无缝衔接。

1. HTML结构 #

用容器包裹主图和圆形元素，方便定位控制：

<div class="hero-container">
  <img src="your-image-path.jpg" alt="首页主视觉图" class="hero-main-img">
  <div class="hero-bottom-circle"></div>
</div>

2. CSS样式实现 #

/* 容器：相对定位，限制主图高度为95%视口高度 */
.hero-container {
  position: relative;
  width: 100%;
  height: 95vh;
  overflow: hidden;
}

/* 主图：占满容器宽度和高度，保持比例不变 */
.hero-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 底部小圆：绝对定位居中，用同图填充并匹配主图底部区域 */
.hero-bottom-circle {
  position: absolute;
  /* 让圆形一半露出主图底部 */
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  /* 圆形尺寸，可根据需求调整 */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* 用主图相同的图片 */
  background-image: url('your-image-path.jpg');
  /* 背景图宽度和主图一致，保证缩放匹配 */
  background-size: 100vw auto;
  /* 截取主图底部的区域填充圆形 */
  background-position: center bottom;
}

微调技巧 #

• 如果圆形和主图衔接处错位，可调整background-position的垂直偏移值，比如background-position: center calc(100% + 50px);（数值对应圆形半径）。
• 响应式适配：把圆形尺寸改为width: 10vw; height: 10vw;，bottom: -5vw;，保证不同屏幕下比例一致。
• 若需要完整显示主图而非裁剪，可将object-fit: cover改为object-fit: contain，但需注意可能出现的留白。

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