Ширина условного изображения - отзывчивый

Question

В настоящее время я доволен своим размером изображения на рабочем столе. Он установлен на 50%. Но когда я просматриваю изображение на своем телефоне, это слишком мало. Мне интересно, как установить изображение на 100%, если оно находится на мобильном устройстве, но 50% на рабочем столе.

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

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

Я пробовал этот метод, но с указанием точек, я думаю, на самом деле не идея.

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 
} 

, потому что, когда мы используем "%" вместо оч.сл. означает% от родительского элемента ширина
может быть родитель имеет 100px ширины, так 50% от ширины для ребенка 50px
также определить видовой экран:

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