Size html img: HTML Background Images

block-size | HTML и CSS с примерами кода

Свойство max-block-size определяет максимальный размер элемента в направлении, перпендикулярном направлению письма, указанному в writing-mode. То есть, если направление записи горизонтальное, то max-block-size эквивалентно max-height; если направление записи вертикальное, max-block-size равен max-width.

Максимальная длина другого размера указывается с помощью свойства max-inline-size.

• block-size
• inline-size
• max-block-size
• max-inline-size
• min-block-size
• min-inline-size

Синтаксис

/* <length> values */
max-block-size: 300px;
max-block-size: 25em;
/* <percentage> values */
max-block-size: 75%;
/* Keyword values */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fill-available;
/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;

Значения

Значением свойства max-block-size может быть любое значение, допустимое для свойств max-width и max-height:

<length>

Максимальная ширина как абсолютное значение.

<percentage>

Максимальная ширина, выраженная в процентах от ширины содержащего блока.

Значения ключевых слов:

none

Ширина не имеет максимального значения.

max-content

Внутренняя предпочтительная ширина.

min-content

Собственная минимальная ширина.

fill-available

Ширина содержащего блока минус горизонтальное поле, граница и отступ.

fit-content

То же, что и max-content.

Спецификация

• CSS Logical Properties and Values Level 1

Пример

CSSHTML

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font: 16px 'Open Sans', 'Helvetica', 'Arial', sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}
.horizontal {
  writing-mode: horizontal-tb;
}
.vertical {
  writing-mode: vertical-rl;
}

<p>
  Writing mode <code>horizontal-tb</code> (the default):
</p>
<div>
  Call me Ishmael.  Some years ago—never mind how long
  precisely—having little or no money in my purse, and
  nothing particular to interest me on shore, I thought I
  would sail about a little and see the watery part of the
  world. It is a way I have of driving off the spleen and
  regulating the circulation.
</div>
<p>Writing mode <code>vertical-rl</code>:</p>
<div>
  Call me Ishmael. Some years ago—never mind how long
  precisely—having little or no money in my purse, and
  nothing particular to interest me on shore, I thought I
  would sail about a little and see the watery part of the
  world. It is a way I have of driving off the spleen and
  regulating the circulation.
</div>

См. также

• max-width и max-height

Ссылки

• max-block-size ^{MDN (англ.)}
• Новые логические свойства в CSS!

Как использовать HTML-тег img

Изображения можно отображать с помощью тега img .

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

Мы можем использовать широкий набор изображений. Наиболее распространенными являются PNG, JPEG, GIF, SVG и, в последнее время, WebP.

Стандарт HTML требует наличия атрибута alt для описания изображения. Это используется программами чтения с экрана, а также ботами поисковых систем:

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

Атрибут srcset позволяет вам установить адаптивные изображения, которые браузер может использовать в зависимости от плотности пикселей или ширины окна, в соответствии с вашими предпочтениями. Таким образом, он может загружать только те ресурсы, которые ему необходимы для отображения страницы, без загрузки большего изображения, например, если оно находится на мобильном устройстве.

Вот пример, где мы даем 4 дополнительных изображения для 4 разных размеров экрана:

В srcset мы используем меру w для указания ширины окна.

Поскольку мы это делаем, нам также нужно использовать атрибут размеров :

В этом примере строка (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px в атрибуте размеры описывает размер изображения по отношению к области просмотра с разделением нескольких условий через запятую.

Условие мультимедиа max-width: 500px устанавливает размер изображения в соответствии с шириной области просмотра. Короче говоря, если размер окна < 500 пикселей, он отображает изображение со 100% размером окна.

Если размер окна больше, но < 900px , изображение отображается в размере 50% от размера окна.

А если еще больше, то рендерит изображение в 800px.

Единица измерения vw может быть новой для вас, и вкратце мы можем сказать, что 1 vw составляет 1% ширины окна, поэтому 100vw составляет 100% ширины окна.

Полезным веб-сайтом для создания srcset и постепенно уменьшающихся изображений является https://responsivebreakpoints.com/.

В конце января организую веб Разработка Учебный лагерь.

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

Это не «просто курс». Это большое мероприятие, которое я организую раз в год.

Мы начнем с нуля, изучим основы веб-разработки, HTML, CSS, JavaScript, Tailwind, Node.js, затем мы изучим React, JSX, как использовать PostgreSQL, Astro, Next.js, Prisma и многое другое!

В конце первых 10 недель вы будете знать, как создавать веб-сайты и веб-приложения, а я открою ты 2-й этап Bootcamp: вы получите доступ к большому количеству проектов, эксклюзивных для Bootcamp выпускники, так что вы можете следуйте моим инструкциям, чтобы создавать такие вещи, как личные области с аутентификацией, клоны популярных сайтов, таких как Твиттер YouTube Reddit, создание сайтов электронной коммерции и многое другое.

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

Чтобы узнать больше, посетите сайт bootcamp.dev

Документация: — amp.dev

Описание

Заменяет тег img HTML5.

Поддерживаемые макеты

fill фиксированная фиксированная высота flex-item встроенный nodisplay адаптивный

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

Замена AMP HTML для обычного HTML img 9тег 0004. С amp-img , AMP обеспечивает мощную замену.

AMP может выбрать отсрочку или приоритет загрузки ресурсов в зависимости от области просмотра. местоположение, системные ресурсы, пропускная способность соединения или другие факторы. Компоненты