Дизайн адаптивного веб-сайта - Изображения

Использование свойства width

Если width Свойство установлено в проценты, а высота установлена в "auto", то изображение будет автоматически увеличиваться или уменьшаться:

Пример

img {
  width: 100%;
  height: auto;
}

Попробуйте это亲自

Обратите внимание, что в приведенном выше примере изображение может увеличиться до размера больше исходного. В большинстве случаев лучше использовать max-width Свойство.

Использование свойства max-width

Если установить свойство max-width в 100%, то изображение будет уменьшаться по мере необходимости, но не будет увеличиваться до размера больше исходного:

Пример

img {
  max-width: 100%;
  height: auto;
}

Попробуйте это亲自

Добавление изображения в экземпляр веб-страницы

Пример

img {
  width: 100%;
  height: auto;
}

Попробуйте это亲自

Фоновое изображение

Фоновое изображение также может реагировать на изменение размера и масштабирования.

Вот три метода, которые мы展示了:

1. Если установить background-size Если установлено свойство "contain", то фоновое изображение будет масштабироваться и пытаться соответствовать области содержимого. Однако изображение будет сохранять свои пропорции (отношение ширины к высоте изображения):

Это CSS-код:

Пример

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

Попробуйте это亲自

2. Если background-size Свойство установлено в "100% 100%", то фоновое изображение будет растягиваться, чтобы покрыть всю область содержимого:

Это CSS-код:

Пример

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

Попробуйте это亲自

3. Если background-size Если свойство установлено в "cover", то фоновое изображение будет масштабироваться, чтобы покрыть всю область содержимого. Обратите внимание, что значение "cover" поддерживает пропорции и может обрезать часть фонового изображения:

Это CSS-код:

Пример

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Попробуйте это亲自

Подготовка различных изображений для различных устройств

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

Это большое изображение и маленькое изображение, которые будут отображаться на различных устройствах:

Пример

/* Для ширин менее 400 пикселей: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Для ширин 400 пикселей и выше: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Попробуйте это亲自

Вы можете использовать медиа-запросы min-device-width вместо min-width проверять ширину устройства, а не ширину браузера. Затем, когда вы изменяете размер окна браузера, изображение не изменяется:

Пример

/* Для устройств с разрешением менее 400 пикселей: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Для устройств с разрешением 400 пикселей и выше: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Попробуйте это亲自

Элемент <picture> в HTML5

HTML5 ввел <picture> Элемент, который позволяет определить несколько изображений.

Поддержка браузерами

38.0 13 38.0 9.1 25.0

<picture> Действие элемента подобно <video> и <audio> Элементы. Мы установили различные источники, и приоритет первого источника - это используемый источник:

Пример

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Попробуйте это亲自

srcset Атрибут является обязательным и определяет источник изображения.

media Атрибут является опциональным и принимает значения, которые могут быть Правило CSS @media Найденные медиа-запросы.

Совет:Вы также должны учитывать, что не поддерживается <picture> Определение элемента браузером <img> Элемент.