將圓點圖像上的點元素放在相同的位置

Question

有沒有什麼辦法可以在相同位置上的圓形圖像上放置一個小點圓點？這些圖像是由我的網站用戶選擇的，因此它們沒有固定的大小。我想在下面的這張照片中放置該點。

編輯：對不起，不提供代碼。同時，我發現了一個解決方案，通過CSS來定位img寬度。這裏是我的工作示例代碼：

<div class="img-box"> 
    <a class="avatar-link" href="#"> 
     <img width="100" height="100" alt="avatar" src="http://image.prntscr.com/image/28ad5c0c6da14d4abcaba545fd115289.png" class="user-avatar"> 
     <div class="user-status"></div> 
    </a> 
</div> 

<div class="img-box"> 
    <a class="avatar-link" href="#"> 
     <img width="140" height="140" alt="avatar" src="http://image.prntscr.com/image/e1c7dec3eced491b8a16ac8d1103b5ea.png" class="user-avatar"> 
     <div class="user-status"></div> 
    </a> 
</div> 

CSS代碼：

.img-box{  
    margin: 40px; 
} 

a.avatar-link{ 
    position: relative; 
    display: inline-block; 
} 

.img-box img.user-avatar{ 
    border-radius: 50%; 
    display: block; 
} 

.user-status { 
    border-radius: 50%; 
    height: 10px; 
    position: absolute; 
    right: 10px; 
    bottom: 10px; 
    width: 10px; 
    background-color: #ED0000; 
} 

.img-box img.user-avatar[width="140"] + .user-status{ 
    right: 16px; 
    bottom: 15px; 
} 

Working example

Answer 1

您需要設置bottom和right位置的百分比，然後用transform調整根據位置紅圈的寬度/高度。

我創建了一個名爲corner finder的元素來計算百分比值（試驗和錯誤，我不知道數學是什麼）。這可以從您的真實代碼中刪除，但有助於演示過程。隨着圓圈變得非常大，它變得非常輕微，但它很接近。

.img-box { 
 
    margin: 40px; 
 
} 
 

 
.avatar-link { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.avatar-link::after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 14.8%; 
 
    right: 14.8%; 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: red; 
 
    transform: translate(5px, 5px); /* half width and height */ 
 
    border-radius: 50%; 
 
} 
 

 
.avatar-link img { 
 
    border-radius: 50%; 
 
    vertical-align: top; 
 
} 
 

 
/* Can be removed, just for demonstration */ 
 
.corner-finder { 
 
    position: absolute; 
 
    top: 14.8%; 
 
    bottom: 14.8%; 
 
    right: 14.8%; 
 
    left: 14.8%; 
 
    background-color: rgba(0,0,0,0.3); 
 
    z-index: 1; 
 
}

<div class="img-box"> 
 
    <a class="avatar-link" href="#"> 
 
    <div class="corner-finder"></div> 
 
    <img src="http://placehold.it/100x100" alt=""> 
 
    </a> 
 
</div> 
 

 
<div class="img-box"> 
 
    <a class="avatar-link" href="#"> 
 
    <div class="corner-finder"></div> 
 
    <img src="http://placehold.it/200x200" alt=""> 
 
    </a> 
 
</div> 
 

 
<div class="img-box"> 
 
    <a class="avatar-link" href="#"> 
 
    <div class="corner-finder"></div> 
 
    <img src="http://placehold.it/300x300" alt=""> 
 
    </a> 
 
</div> 
 

 
<div class="img-box"> 
 
    <a class="avatar-link" href="#"> 
 
    <div class="corner-finder"></div> 
 
    <img src="http://placehold.it/400x400" alt=""> 
 
    </a> 
 
</div>

Answer 2

任何視覺元素不應該是在文檔中。

使用CSS僞元素可以達到這種視覺效果。

HTML

<div class=circle></div> 

SCSS

.circle { 
    border: 1px solid black; 
    width: 160px; 
    height: 160px; 
    border-radius: 50%; 
    padding: 50px; 
    margin: 50px; 
    position: relative; 
    &::after { 
    display: block; 
    content: " "; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    border: 1px solid black; 
    position: absolute; 
    right: 50px; 
    bottom: 10px; 
    } 
} 

編譯CSS

.circle { 
    border: 1px solid black; 
    width: 160px; 
    height: 160px; 
    border-radius: 50%; 
    padding: 50px; 
    margin: 50px; 
    position: relative; 
} 
.circle::after { 
    display: block; 
    content: " "; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    border: 1px solid black; 
    position: absolute; 
    right: 50px; 
    bottom: 10px; 
} 

如果你需要什麼動態地設置試圖改變使用JavaScirpt的CSS屬性值。

CodePen樣本（這只是一個樣本，但你的想法），https://codepen.io/li-xinyang/pen/qrWZgY