Рассматривая одно изображение, мне нужно было его сделать адаптивным, а точнее резиновым, так если можно выразится. Просмотрев в сети, то там безусловно много всяких вариантов, но все они созданы с использованием процентного значения для свойства width как(ширины) и значении auto для свойства height (высоты) изображений.
Код
img {
width: 100%;
height: auto;
}
Рассматривая базовые значения адаптивного изображения к элементу img, что идет внутри блока, то задаем ширину ширину в 100%, что автоматически будет равно ширине блока.
HTML:
Код
<div class="klass">
<img src="Изображение.jpg" width="960" height="640" />
</div>
CSS:
Код
div.klass {
width: 100%;
max-width: 840px;
margin: 0 auto; /* центрируем основной контейнер */
}
img {
width: 100%; /* ширина картинки */
height: auto; /* высота картинки */
}
Если требуется адаптивное изображение на всю ширину экрана, которые автоматически заполнит 100% размера окна просмотра.
CSS:
Код
.container {
width: 100%;
}
img {
width: 100%;
}
Кратко по теме.
Так как мне просто хотелось, чтоб при сжатие картинки, оно автоматически выстраивалось под определенное окно, что нашел такой вариант.
HTML
Код
<div class="kolichestvo">
<img src="Изображение.jpg" />
</div>
CSS
Код
.kolichestvo {
float: left;
margin: 0 10px;
}
.kolichestvo img {
max-width: 100%;
height: auto;
}
Возможно есть другие варианты, то если кто знает, поделитесь в плиз в теме.
Демонстрация
