html - 条件图像宽度 - 响应式

Question

我目前对桌面上的图像大小很满意。它设置为 50%。但是当我在手机上查看图像时，它太小了。我想知道如何将图像在移动设备上设置为 100% 而在桌面上设置为 50%。

http://codepen.io/anon/pen/NxLvEQ

<img class="featuredImg" src="http://bandwagonbible.azurewebsites.net/Stories/NFLBeginnersGuide/Image1.JPG" width="50%"/>

我已经尝试过这种方法，但我认为指定 px 并不是真正的主意。

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

Answer 1

您可以对设备使用媒体查询，例如，

@media (max-width:767px) {
    img { width:100%;}
}