条件图像宽度 - 响应

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%;}
}

Answer 2

您可以使用媒体查询来设置视口的最小宽度和最大宽度。

@media screen and (min-width: 300px) and (max-width: 768px)

在它下面，您可以编写想要在视口介于300和768像素之间时应用的代码。

Answer 3

将“％”更改为“vw”：

img
{
max-width: 50vw;//or 100vw depends on you
}

因为当我们使用“％”而不是vw表示父元素宽度的％
也许父母有100px的宽度所以50％的儿童宽度是50px左右还定义了一个视口：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">