Question

我正在尝试将图像的宽度设置为220px，除非视图（例如在iphone上）将使220px占据屏幕宽度的50％以上。

如果我将图像设置为最大宽度为220px，则需要超过iPhone 6 4.7“屏幕宽度的50％”。例如，在这种情况下，我希望CSS规则为最大宽度：50 ％，而不是220px。

我该如何做到这一点？

Answer 1

怎么样：

＆＃13;

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

＆＃13;

Answer 2

我建议使用CSS＆＃39;媒体查询：

img {
    width: 220px;
}
@media only screen and (max-device-width: 439px) {
    img {
        width: 50%;
    }
}

此规则应将所有<img>元素的宽度设置为220px;在220px超过一半（因此选择max-device-width 439px (2 x 220) - 1）的设备上，它将覆盖先前的规则，并设置{{1}的宽度将元素改为<img>。

Answer 3

这应该这样做：

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