CSS:将最大宽度设置为 220px，如果 220px 将超过 View 的 50%，则设置为 50%

Question

我正在尝试将图像的宽度设置为 220 像素，除非 View (例如在 iPhone 上)会使 220 像素占据屏幕宽度的 50% 以上。

如果我将图像设置为 220px max-width，例如 iPhone 6 4.7"屏幕宽度将超过 50%。因此在这种情况下，我希望 CSS 规则为 max-width: 50 %，而不是 220px。

我怎样才能做到这一点？

Answer 1

怎么样:

img {
  width: 50%;
  max-width: 220px;
  height: auto;
}