• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Резиновое фоновое изображение с помощью CSS (Как создать адаптивные изображения с помощью CSS)
Резиновое фоновое изображение с помощью CSS
Kosten
Дата: Среда, 2019-11-20, 02:38 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


Рассматривая одно изображение, мне нужно было его сделать адаптивным, а точнее резиновым, так если можно выразится. Просмотрев в сети, то там безусловно много всяких вариантов, но все они созданы с использованием процентного значения для свойства 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;
}

Возможно есть другие варианты, то если кто знает, поделитесь в плиз в теме.

Демонстрация
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Резиновое фоновое изображение с помощью CSS (Как создать адаптивные изображения с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: