This is my CSS code for the Image (It's staying at the original size from cloudinary)
.img-container {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 1.5rem;
}
#skills-img {
height: 100%;
width: 100%;
display: block;
object-fit: contain;
border-radius: 50%;
position: relative;
}
My HTML for the Image
<div class="img-container">
<img src="" id="skills-image" alt="Skill">
</div>
Any ideas on why it wont let me resize the cloudinary image?
TIA Connor
Looks like a typo: the CSS is for #skills-img, the image id in HTML is skills-image
.img-container {
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 1.5rem;
}
#skills-img {
height: 100%;
width: 100%;
display: block;
object-fit: contain;
border-radius: 50%;
position: relative;
}<div class="img-container">
<img src="" id="skills-img" alt="Skill">
</div>i hope you got your solution .