img中心，圆和中心在一个div

Question

我堆栈与CSS问题。 我想在一个div我的照片中心（红色）的尺寸股利的50％，也浑圆......

这里是我的html代码：

<ion-content class="masters"> 
    <ion-row> 
    <div class="profil-img"> 
     <img src="../../assets/img/tennis-club.jpeg" alt=""> 
    </div> 
    </ion-row> 
</ion-content> 

这里是我的CSS代码：

.profil-img img{ 
    border-radius: 50%; 
    border: 3px solid white; 
    // position:absolute; 
    max-width: 50%; 
    max-height: 50%; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
} 

.profil-img{ 
border: 2px solid black; 
} 

这里的结果：

感谢您的帮助！

Answer 1

对于完美的圆形图像，您必须为图像指定相同的宽度和高度。

.profil-img img{ 
    border-radius: 50%; 
    border: 3px solid white; 
    display: inline-block; 
    height:200px; 
    width: 200px; 
    margin: 0 auto; 
    vertical-align: middle; 
} 

如果你想要的形象被垂直和水平居中，你可以尝试以下方法：

.profil-img img{ 
    border-radius: 50%; 
    border: 3px solid white; 
    display: inline-block; 
    position:relative; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    height:200px; 
    width: 200px; 
} 

请让我知道，如果它为你工作。

Answer 2

我已经尝试了很多东西，现在我有一个解决方案。
这能解决你的问题吗？

.red { 
 
    position: relative; 
 
    width: 250px; 
 
    height: 250px; 
 
    background-color: #f00; 
 
    border: 2px solid #000; 
 
} 
 
.profil-img { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 50%; 
 
    top: 50%; 
 
    left: 50%; 
 
    border-radius: 50%; 
 
    transform: translateY(calc(-50% - 3px)) translateX(calc(-50% - 3px)); 
 
    border: 3px solid #fff; 
 
    overflow: hidden; 
 
} 
 
.profil-img > img { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    min-height: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    -ms-transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%) translateX(-50%); 
 
}

<div class="red"> 
 
    <div class="profil-img"> 
 
    <img src="https://cdn.transportbox-katzen.de/wp-content/uploads/2016/03/katze-gewohnheitstier.jpg" alt=""> 
 
    </div> 
 
</div>