I have a dilemma with my class that is supposed to display images. The issue arises when I try to place a div within an image inside this class.
Everything works smoothly when the image takes up the entire width of the class, but as soon as the image width is reduced, the div shifts and loses its responsiveness :(
Does anyone have any ideas on how to fix this?
Picture Predicament
https://i.stack.imgur.com/qOQC4.png
Image does not fill the width ... causing the div to be misaligned.
Here is My Code ---> Stackblitz
You can view the code snippet above and experiment by changing the image widths.
HTML Markup
<div class="drop" >
<div class="abc">
<img class="img-fluid Images" src="https://i.ibb.co/3p3D4h6/dmitry-bayer-276d-F1-RG67-Q-unsplash.jpg">
<div class="row boxImage">
<div class="row divBtn">
<a class="toggle-one">
<span class="nav-link btnZ"></span>
</a>
<a class="toggle-two">
<span class="nav-link btnT"></span>
</a>
<a class="toggle-three">
<span class="nav-link btnR"></span>
</a>
<a class="toggle-four">
<span class="nav-link btnP"></span>
</a>
</div>
<ul class="list-inline rating-list" *ngFor="let star of stars" style="display: inline-block">
<li (click)="countStar(star)" [ngClass]="{'selected': (star <= selectedValue)}">
<i class="fa fa-star"></i>
</li>
</ul>
</div>
</div>
</div>
CSS Styling
.drop {
margin-left: 25px;
width: 90%;
height: 696px;
border-radius: 15px;
overflow: hidden;
text-align: center;
background: white;
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.boxImage{
cursor: pointer;
position: absolute;
background-color: white;
background-position: 13px 13px;
background-repeat: no-repeat;
height: 50px;
width: 44%;
border-radius: 8px;
opacity: 1;
top: 91%;
left: 43%;
}
.abc {
height: 100%;
}
.abc img {
height: 100%;
max-width: 100%;
}