Image within Div

Question

I am creating a slider using swiper/angular of categories.

I have category image and category name. How can I get category image and name placed vertically inside a circle?

<div class="slidesContainer" #header>
      <swiper #swiperRef mode="ios" [config]="config" >
        <ng-template swiperSlide *ngFor="let c of parentCategory.categories let i=index;">
          <div id='category_container'>
            
          <div id='category'>
            <ion-img [ngStyle]="{'backgroundColor':currentCategory.categoryId==c.categoryId?'blanchedalmond':'#f9f9f9'}"  src="{{originalImagePath}}/{{getImageName(c.imageName)}}"></ion-img>
            <h2 style="font-size:11px;text-align:center;font-weight: bold;">{{c.categoryName}}</h2>
          </div>
      </div></ng-template>
       
      </swiper>
    </div>

#category_container {
  height: 75px;
  width: 75px;
  background: white;
}

#category {
  width: 100%;
  //background: #000;
  color: #fff;
  text-align: center;

  ion-img{
    border-radius: 50%;
  }
 
}

This is how it is rendered. Some of the images are outside of the div. How to make it perfect for any image size?

you could go for [clipping](https://stackoverflow.com/questions/7075974/clipping-divs-inner-content), or [max-width and max-height](https://stackoverflow.com/a/40997966/4935162) for the images — Yarin_007, Oct 29 '22 at 11:12
Please post the HTML that is generated by the Angular, rather than the Angular code itself; since the CSS is applied to the result. — David Thomas, Oct 29 '22 at 13:30

score 0 · Answer 1 · answered Oct 29 '22 at 12:13

The best method would be using max-height and max-with properties and setting them to image with following logic:

img {
  max-height: 32.5px //  half of circle diameter
  max-width: 32.5px //  half of circle diameter
}

If you want some more spacing just decrease the number. Also do not set that border radius on image itself set it on it's container.

Made as elaboration on @Yarin_007 comment

Image within Div

1 Answers1