img中心，圓和中心在一個div

我堆棧與CSS問題。我想在一個div我的照片中心（紅色）的尺寸股利的50％，也渾圓......img中心，圓和中心在一個div

這裏是我的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; 
}

這裏的結果：

感謝您的幫助！

來源

2017-06-02 YLM

對於完美的圓形圖像，您必須爲圖像指定相同的寬度和高度。

.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; 
}

請讓我知道，如果它爲你工作。

來源

2017-06-02 08:16:44 SreenathPG

謝謝回答@SreenathPG！所以，如果我指定相同的寬度和高度，圖像是完美的圓形，謝謝你。但實際上，圖片比我的div大（我能給出我的div大小的百分比嗎？並且仍然有一個完美的圓圈？），其次，使用此代碼，我的圖片堆疊在左側。如果您有想法/解決方案..謝謝 – YLM

是的，你可以給出該div的寬度的50％。如果你可以發佈一個工作小提琴，我可以幫你。至少你能給我鏈接圖像 – SreenathPG

我編輯你的文章與屏幕 – YLM

我已經嘗試了很多東西，現在我有一個解決方案。
這能解決你的問題嗎？

.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>

來源

2017-06-02 08:25:26 UfguFugullu

太棒了！這項工作，但因爲我在一個離子2應用程序，我不使用'class =「紅色''我有一個離子網格..所以現在唯一的問題是，我的圖片是一個完美的圓圈。@UfguFufullu – YLM

可能因爲我的圖像沒有相同的高度和寬度..你有什麼想法我可以把它變成圓形，無論高/寬...？ @UfguFufullu – YLM

'.profil-img'類將始終具有與父級相同的寬度 - 高度比率（在本例中，像'.red'）。正如你想要的那樣，'.profil-img'獲得了父'div'的寬度和高度的一半。如果你想得到另一個比例，你必須改變父母的寬度或身高，或者兩者都是@YLM – UfguFugullu

img中心，圓和中心在一個div

回答

相關問題