避免拉伸圖像（css，wordpress）

我目前正在使用我的wordpress網站。我有主題優化，我已經做了一個童話。我已經對我的塊小部件進行了更改，以使它們變圓而不是方形。我的問題是塊圖像被拉伸。避免拉伸圖像（css，wordpress）

所以我的問題是，你如何讓你的形象適合圓沒有拉伸圖像？我試過使用最大寬度，但它不起作用。是否有代碼可以使圖片動態顯示，以便根據框架進行重新整理？

下面是三個塊之一的css代碼（它們幾乎完全相同）。

img.allignnone.wp-image-226 { 
width: 300px; 
height: 300px; 
border: 1px solid #DDDDDD;  
border-radius: 50% 50% 50% 50%; }

來源

2016-08-03 Maria

有沒有可用的HTML？ – LGSon

add object-fit：cover;

img.allignnone.wp-image-226 { 
     width: 300px; 
     height: 300px; 
     object-fit: cover; /*HERE*/ 
     border: 1px solid #DDDDDD;  
     border-radius: 50% 50% 50% 50%; 


}

來源

2016-08-03 18:31:03

謝謝！ :)它使圖片與框架成比例，但現在我希望它是一個完全的圓形而不是橢圓形。有沒有一個聰明的方法來做到這一點？你能以某種方式將圖片畫成完整的圓形圖案嗎？ – Maria

您必須將框架製成方形而不是矩形。您可以將高度和寬度設置爲以像素爲單位的特定相等尺寸，或者如果您希望某個百分比強制使用正方形，則高度和寬度應該爲vw而不是℅，因爲它將基於高度和寬度大小關閉視口寬度（因此顯示器可以是任何尺寸或形狀，並且仍然可以產生正方形） –

.container {width：30vw;高度：30vw; border-radius：50％;} –

避免拉伸圖像（css，wordpress）

回答

相關問題