Изменение размера изображений html/css

Question

У меня есть несколько изображений в приложении facebook. Проблема в том, что изображение довольно большое, и мне нужно, чтобы он хорошо смотрел, доступен ли он с компьютера или телефона. Установка его на некоторые фиксированные размеры, очевидно, заставит его выглядеть плохо, учитывая различные размеры экрана.
Итак, как мне изменить размер, чтобы он выглядел хорошо на любом экране?

Answer 1

Установить ширину и высоту на img тегах быть проценты (их контейнера):

<img src="http://..." alt="" width="50%" height="30%" /> 

Adjust проценты к вашим потребностям.

Answer 2

Попробуйте

img 
{ 
    width:100%;/*adjust this value to your needs*/ 
    max-width: the size of the image;/* so it wont get bigger and pixelated*/ 
    height:auto; 
} 

другой вариант, если это возможно, заключается в использовании медиа-запросов, так и для различных размеров браузера, вы можете загрузить различные размеры изображения.

вот fiddle, чтобы увидеть, если это то, что вы пытаетесь достичь

Answer 3

Используйте медиазапросы. например:

@media all and (min-width: 1001px) { 
    img { 
    width: 100%; /* insert prefered value */ 
    height: auto; 
    } 
} 

@media all and (max-width: 1000px) and (min-width: 700px) { 
    img { 
    width: 100%; /* insert preferred value */ 
    height: auto; 
    } 
} 

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { 
    img { 
    width: 100%; /* insert preferred value */ 
    height: auto; 
    } 
}