[英]CSS: How to make div adapt to image size?
我已經實現了 CSS 狀態,允許查看用戶是否在線:
這是 CSS 代碼:
.status-circle-online {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgb(255, 60, 0);
border: 2px solid white;
bottom: 10px;
right: 10px;
position: absolute;
}
這是 html 代碼:
<div>
<img
src={profileImageSrc}
className="rounded-circle ml-3"
/>
<div
className={`status-circle-${online_or_offline_signal} cursor-pointer`}
/>
</div>
問題是當我減小 window 大小時,狀態信號不再是它應該在的位置:
知道如何讓它“粘”在圖像上嗎?
如果沒有看到更多的代碼,很難准確地說出來。 但是您可以嘗試添加position: relative;
到包含的 div,然后對於紅色圓圈,使用百分比而不是right
和bottom
的像素。
Position 父 div relative
,然后狀態指示器的絕對值將相對於該容器:
.status-photo { position: relative; width: 100px; height: 100px; }.status-photo img { width: 100%; height: 100%; border-radius: 100%; object-fit: cover; }.status-photo.status { width: 20px; height: 20px; border-radius: 50%; background-color: rgb(255, 60, 0); border: 2px solid white; bottom: 0; right: 10px; position: absolute; }
<div class="status-photo"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGVyc29ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" /> <div class="status" /> </div>
上面的答案很有幫助。 但是,一種更具響應性的方法是對用戶百分比:
.status-photo {
display: block;
position: relative;
width: auto;
height: auto;
}
.status-photo img {
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
}
.status-photo .status-online {
width: 20%;
height: 20%;
border-radius: 50%;
background-color: rgb(255, 60, 0);
border: 1px solid white;
bottom: 0%;
right: 0%;
position: absolute;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.