如何通过CSS（百分比方式）统一不同尺寸图片的响应式显示？

Got it, let's solve this issue where your vertical images are showing up as ellipses when set to circular—all while sticking strictly to percentage values and not worrying about horizontal images (since you said they're working fine).

The Core Problem #

When you apply border-radius: 50% directly to images, vertical ones (taller than wide) stretch to fit their container's dimensions. If your container isn't a perfect square, that's how you end up with ellipses. Since we need responsive, percentage-based sizing, we'll use a square container trick paired with object-fit to keep images proportional.

Step 1: HTML Structure #

Wrap each image in a container—this gives us control over the square shape without hardcoding pixel values:

<div class="circular-img-container">
  <img src="your-image-path.jpg" alt="Image description">
</div>

Step 2: CSS Solution (100% Percentage-Based) #

Here's the responsive CSS that fixes the vertical image ellipse issue:

.circular-img-container {
  /* Create a responsive square container: padding-top is relative to width */
  width: 25%; /* Adjust this percentage to control size (e.g., 30%, 50%) */
  padding-top: 25%; /* Matches width to make a perfect square */
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.circular-img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Keep image aspect ratio, crop excess to fit the square container */
  object-fit: cover;
  /* Optional: Ensure image is centered when cropped (default behavior) */
  object-position: center;
}

How This Works #

• Square Container: padding-top: 25% (matches the container's width percentage) ensures the container is always a perfect square, no matter the screen size. This is key for getting a true circle with border-radius: 50%.
• object-fit: cover: This property makes the image maintain its original aspect ratio while filling the entire square container. For vertical images, it crops the top and bottom edges (keeping the center visible) instead of stretching it into an ellipse. For horizontal images, it crops left/right edges—since you don't mind this, it's perfect for your use case.

Quick Adjustments #

• Change the width and padding-top values (keep them equal!) to make circles larger or smaller (e.g., width: 40%; padding-top: 40%).
• If you want to prioritize showing the top of vertical images instead of the center, tweak object-position to top center.

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