Как изменить размер изображения на основе разрешения?

Question

Я пытаюсь создать изображение, которое будет увеличиваться или сокращаться на основе разрешения экрана.

Я использую bootstrap и хочу изменить размер изображения. Проблема в том, что изображение не так велико, и я не уверен, как увеличить изображение, если пользователь расходует окно браузера.

Мой HTML, как:

<div> 
<img class='col-md-12' src='img.png'/> 
</div> 

CSS

img{ 
    width:100%; 
} 

Спасибо за помощь!

Answer 1

Загрузочный лоток обеспечивает css для изображений в отзывчивом месте. только вы должны дать класс img-responsive, чтобы сделать изображение изменчивым. см отзывчивых изображений в http://getbootstrap.com/css

Answer 2

Если вы используете Bootstrap 3.0 придать изображению класса «IMG-отзывчивого» причина начальной загрузки уже имеет отзывчивые настройки класса изображений, например, так:

.img-responsive { 
    display: block; 
    height: auto; 
    max-width: 100%; 
} 

Так что для вас I будет использовать:

<div> 
    <img class="img-responsive" src='img.png'/> 
</div> 

Answer 3

это поможет вы- эти библиотеки JQuery для изменения размеров изображений на отзывчивым зрения

http://responsiveimg.com/

http://responsejs.com/

Answer 4

Попробуйте это:

HTML:

<div> 
<img class='col-md-12' src='test.jpg'/> 
</div> 

CSS:

div{ 
    width: 100%; 
} 
img{ 
    min-width:100%; 
    height:auto; 
} 

Вот DEMO