css - 设置 1 :1 square image to be 10% of the screen height and width css

Question

将最大高度设置为页面高度的 10%。最大宽度为页面宽度的 10%

例如如果

页面高度为100px

页面宽度为200px

或者

页面高度为200px

页面宽度为100px

我希望我的图片设置为 10px 宽和 10px 高

10%，以较小者为准；页面的高度或宽度。

我试过了

width: 10%;
height: 0;
padding-bottom: 10%;

和

max-width: 10%;
max-height: 10%;

但它们只受页面宽度的影响，而不是高度。

Answer 1

想通了

width: 10vmin; 
height: 10vmin;

CSS做两者中较小者的 10%，高度或宽度

http://caniuse.com/#feat=viewport-units