因此，在設計版面的時候，我遇到了一些與在網頁文檔中插入圖片相關的問題 找不到精確的百分比，無法像布局中那樣完美地彈出圖像。

我嘗試了這行代碼:

border-radius: 90% 0 52% 52% / 60% 0 31% 31%;

雖然那里仍然有白色圓圈線

這是它在布局中的形象 這是JPG的圖像文件，應該是突然出現的

你需要一個

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

看看這個

clip-path CSS屬性創建一個剪輯區域，用于設置應該顯示元素的哪一部分。顯示區域內部的部分，而隱藏區域外部的部分。

多邊形() 使用SVG填充規則和一組頂點定義多邊形。

例如: 您可以將多邊形塑造成三角形:

body {
  margin: 0;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

.container {
  display: flex;
  justify-content: space-around;
}

.image-container {
  width: 40%;
  height: 20em;
  overflow: hidden;
  margin: 0;
}

.cropped-image {
/*   height: 100%; */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

<main class="container">
      <figure class="image-container">
        <h1>Before Cropping</h1>
        <img
          src="https://i.imgur.com/jijeTMT.jpeg"
          alt="Photo by XPS on Unsplash"
          class=""
          width="1920"
          height="1282"
          loading="lazy"
        />
      </figure>
      
      <article class="image-container">
        <h1>After Cropping</h1>
        <img
          src="https://i.imgur.com/jijeTMT.jpeg"
          alt="Photo by XPS on Unsplash"
          class="cropped-image"
          width="1920"
          height="1282"
          loading="lazy"
        />
      </article>
    </main>