根據屏幕大小使用css製作圓形圖像

我正在嘗試將圖像製作爲圓形。儘管此圖像具有不同的寬度和高度，但我希望它是圓形，似乎它們具有相同的寬度和高度。例如， ;我的圖像尺寸：250X300。但我希望它是200X200 circle.actually我可以很容易做到這一點。問題是這樣做的屏幕尺寸。當我把我的手機水平，它必須改變屏幕尺寸。根據屏幕大小使用css製作圓形圖像

我的CSS代碼如下

.image { 
    height: 100px; 
    width: 100px; 
    border: 2px solid #fff; 
    border-radius: 50%; 
    box-shadow: 0 0 5px gray; 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2016-08-23 seyid yagmur

使用'vw'單位。它們依賴於視口寬度。所以，它可以像'width：2vw; height：2vw;'圓圈的寬度取決於設備的寬度。而你正在使用移動設備。所以，也不會有任何支持問題。 –

實際上，我不擅長css，但它似乎可以幫助我。我試試這個 –

是的，沒問題，只需用'vw'替換你的'px'單元然後檢查......根據你的設置，你想要多少價值，比如'5vw'或'50vw'。請記住** 1vw =視口寬度的1％** –

使用VW單位。它們依賴於視口寬度。所以，它可以像寬度：2vw;身高：2vw;圓寬度取決於設備寬度。

.image { 
 
    height: 5vw; 
 
    width: 5vw; 
 
    border: 2px solid #fff; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 5px gray; 
 
    display: inline-block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div class="image"></div>

來源

2016-08-23 11:03:54

我覺得這個答案是缺少一個'溢出：隱藏;'。 – Bram

哥使用背景尺寸：100％100％; 你的風格會像

div { 
     background-size: 100% 100%; 
     background-repeat: no-repeat; 
     border-radius: 50%; 
     width: 200px; 
     height: 200px; 
    }

演示鏈接： http://jsfiddle.net/vNh8t/314/

來源

2016-08-23 06:39:18 sms247

兄弟，沒關係，但是當我縮小或放大我的屏幕時，它必須以相同的比例擴展.. –

朋友，當你添加背景大小：100％100％;在你的div類中，然後尺寸增加wrt到屏幕分辨率，你可以用ctrl +「+」按鈕測試你也可以檢查我的jsfiddle例子 – sms247

我試過vw代替px。，「Deepak Yadav」。我想我找到了解決方案。謝謝弟弟:)鏈接：http://jsfiddle.net/r43LL1ny/ –

對於> ionic2

<ion-card text-center class="hide-card"> 
    <img src="http://placehold.it/300x200" class="custom-avatar"/> 
    <h2>Victorcodex</h2> 
    <p>Have some p tag here</p> 
    <p>I am the third guy inline here</p> 
    <hr> 
</ion-card> 

.hide-card { 
    -webkit-box-shadow: none!important; 
} 

.custom-avatar { 
    height: 30vw; 
    width: 30vw; 
    border: 1px solid #fff; 
    border-radius: 50%; 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
}

請讓我再知道如果這是對你有用。

來源

2017-07-28 15:08:44

你應該在'vw'部分放一些東西;） – m02ph3u5

vw是視口寬度。請在這裏閱讀更多https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ –

根據屏幕大小使用css製作圓形圖像

回答

相關問題