将 1:1 的正方形图像设置为屏幕高度和宽度 css 的 10%答案

【问题标题】：Setting a 1:1 square image to be 10% of the screen height and width css将 1:1 的正方形图像设置为屏幕高度和宽度 css 的 10%
【发布时间】：2015-01-03 23:53:18
【问题描述】：

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

例如如果

页面高度为 100px

页面宽度为200px

或者

页面高度为 200px

页面宽度为 100px

我希望我的图像设置为 10 像素宽和 10 像素高

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

我试过了

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

和

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

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

【问题讨论】：

您无法仅使用 CSS 来做到这一点，因为您需要根据高度调整宽度（反之亦然）。你可以用 JavaScript 做到这一点。这是一个使用 jQuery 的示例：codepen.io/anon/pen/zFImG

标签： css width

【解决方案1】：

想通了

width: 10vmin; 
height: 10vmin;

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

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

【讨论】：