如何实现带内部文字及右上角图片的响应式圆形组件？

Got it, let's tackle this problem step by step. Your current code uses fixed dimensions for the circle, so we'll adjust it to be fully responsive, fix the text centering, and get that top-right image sitting perfectly on the ring's edge.

Key Fixes & Improvements: #

1. Responsive Circle: Ditch fixed width/height and use padding-top: 100% — since padding percentages are based on the element's width, this creates a perfect 1:1 aspect ratio circle that scales with its container.
2. Proper Text Centering: Use Flexbox to effortlessly center text both vertically and horizontally, even with long, wrapping content.
3. Precise Image Placement: Position the small image so it sits exactly on the top-right corner of the circle's border, not just the parent container's corner.

Complete Working Code: #

CSS

/* Wrapper to control the circle's responsive size */
.circle-container {
  width: 80%; /* Adjust this to set the circle's base size */
  max-width: 500px; /* Optional: cap the circle's maximum size on large screens */
  margin: 2rem auto; /* Center the circle on the page */
  position: relative; /* Required for absolute positioning of the small image */
}

/* The responsive circle itself */
.circle-text {
  width: 100%;
  padding-top: 100%; /* Creates a perfect circle by matching width to height */
  border-radius: 50%;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 0;
  display: flex; /* Enable flexbox for centering */
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
  padding: 2rem; /* Add internal padding so text doesn't touch the border */
  overflow-y: auto; /* Allow vertical scroll if text exceeds circle height */
}

/* Small top-right image positioned on the circle's border */
.circle-image {
  position: absolute;
  width: 60px; /* Adjust image size as needed */
  height: 60px;
  border-radius: 50%;
  top: -30px; /* Pull up by half the image height to sit on the border */
  right: -30px; /* Pull right by half the image width to sit on the border */
  border: 2px solid white; /* Optional: add a white border to make the image pop */
}

HTML

<div class="circle-container">
  <img class="circle-image" src="https://picsum.photos/200" alt="Small top-right profile image">
  <div class="circle-text">
    <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
  </div>
</div>

Quick Breakdown of Changes: #

• Responsiveness: The circle-container controls the circle's width, and padding-top:100% ensures it stays a perfect circle no matter how the container scales.
• Text Centering: Flexbox takes care of both vertical and horizontal centering automatically. The overflow-y:auto ensures long text doesn't break the circle layout.
• Image Positioning: By setting top and right to negative half the image's size, we anchor the image exactly on the top-right edge of the circle's border. The optional white border helps it stand out against the circle's black border.

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