Css вписать картинку в div: CSS: вписываем изображение в область

Содержание

css вписать картинку в div

На чтение 4 мин. Просмотров 55 Опубликовано 15.12.2019

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.5+	3.0+	3.6+	2.1+	1.0+

Краткая информация

Значение по умолчанию	auto
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/css3-background/#the-background-size

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ | | auto ] | cover | contain

Значения

Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto .

Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size .

Opera до версии 10.53 использует нестандартное свойство -o-background-size .

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size .

есть div размером 1:1, 1:2, 2:1, 2:2, короче квадрат, большой квадрат, вертикальный блок и горизонтальный блок. Есть картинка непредсказуемого размера, т.е. может быть вертикальной, может горизонтальной. Картинка в этот div вставляется через img и надо сделать так, чтобы картинка уменьшалась/увеличивалась пропорционально до размеров div и заполняла его весь и центровалась. без полей по бокам или сверху снизу.

сделать это если картинку пихать из css бекграундом и background-size:cover; — получилось, но надо сделать через img

зы. бекграунд и background-size:cover не подходят ибо через js идет рендом картинки при загрузке и смена её по времени. хочется сделать красиво и элегантно.

благодарю и буду рад если поможете.

Вопрос задан более трёх лет назад
36109 просмотров

с помощью такого трюка можно такое реализовать
aspect ratio

Имеется некий div с классом .img-container и внутри картинка.

Истинные размеры картинки — могут быть любые. Внимание! Вопрос.

Как сделать так чтобы картинка вписывалась в размер DIV по ширине и высоте, и пропорционально увеличивалась или уменьшалась, если DIV будет менять размеры (а он будет менять размеры)?

Аналог на CSS для DIV:

9 ответов 9

вот пример когда контейнер ресайзится в результате ресайза окна

если хотите без jQuery, это реально, но делайте сами 🙂

Попробуйте сделать так:

Обновление

Если не получится, попробуйте так

Средствами CSS это сложно реализовать (попробуйте в мой пример у . img-container в height подставить 300px; ). Можно попробовать с пом. ajax вычислять широту и высоту контейнера и отдавать параметры картинке img.

Думаю тут проще было бы все сделать через background:

А ларчик то просто открывается.

И будут у вас ВСЕ картинки на сайте подгоняться под размер вашего дива. Хоть со старта, хоть при таскании ширины/высоты окна браузера. И это применимо ко всему. Хоть картинка, хоть видео, хоть ещё что-то, что придумаете. Учите цсс и хтмл, прежде чем заниматься жабой.

Если хочешь добавить адаптивность, еще один блок выше создай, сделай его flex, задай атрибут flex-wrap: wrap

Если через CSS, у тебя div с определенным классом, присвой картинке этот же класс, у тебя получится картинка такой же формы что и тот div в который ты ее «запихиваешь». И как раз таки при изменении параметров div’a этого класса, картинка будет тоже изменяться (увеличишь div в двое, то и картинка увеличится в двое). Так что если все грамотно сделать через классы, то это должно тебе помочь. Это мое субъективное мнение и как вариант помочь решить твою «проблему»

.img-container img Собсно все.
По просьбе дополняю: если размеры блока заданы жестко, мы можем использовать height: 100%;Свойство object-fit аналог background-size для замещаемых элементов https://developer.mozilla.org/ru/docs/Web/CSS/object-fit

Защищён участником Дух сообщества ♦ 19 ноя ’17 в 21:02 .

Благодарим вас за интерес, проявленный к этому вопросу. Так как он собрал большое количество ответов низкого качества и спама, который пришлось удалить, для публикации ответов теперь необходимо иметь 10 баллов репутации на сайте (бонус за ассоциацию учётных записей не учитывается).

Может быть, вы захотите ответить на один из неотвеченных вопросов?

html — Как вписать изображение в CSS-сетку без растяжения

Проблема: IMG растягивает css-сетку, и я хочу, чтобы изображение уменьшилось и вписалось в сетку.

Пробовал : Я попытался установить максимальную высоту / ширину изображения, но это только уменьшает растяжение изображения.

.grid-container {
display:grid;
grid-template-areas:
"nav_bar"
"main"
"about"
"port_over"
"resu_proj"
"links";
background-color: #161616;
grid-row-gap: 5em;
}

/*Nav bar grid*/
.nav_bar {
    display: grid;
    grid-area: nav_bar;
    grid-template-areas: "nav_img nav_links nav_links nav_links";
}

/*Nav bar img*/
.nav_img {
    grid-area: nav_img;
    object-fit: cover;

    background-color: grey;
}

<div>
     <div>

     <img src="./MLW_IMAGES/M.L.W logo.png">


     <div>
          <nav>
             <a href="/index.html#about">About</a>
             <a href="/index.html#portfolio">Portfolio</a>
             <a href="/index.html#contact">Contact</a>
          </nav>
     </div>
     </div>
. ..
</div>

Martin 4 Сен 2019 в 08:05

2 ответа

Лучший ответ

Возьмите один класс только для изображения. Присвойте конкретную высоту и ширину классу изображения и дайте ниже CSS для изображения.

.class-name img{
  max-width: 100%;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
}

Meghna Bhuptani 4 Сен 2019 в 05:14

Вы можете попробовать установить max-height и max-width и указать ширину, которую вы хотите, чтобы изображение получало, если размер изображения больше. это то, что вы ожидаете?

. grid-container {
display:grid;
grid-template-areas:
"nav_bar"
"main"
"about"
"port_over"
"resu_proj"
"links";
grid-row-gap: 5em;
}

/*Nav bar grid*/
.nav_bar {
    display: grid;
    grid-area: nav_bar;
    grid-template-areas: "nav_img nav_links nav_links nav_links";
}

/*Nav bar img*/
.nav_img {
    grid-area: nav_img;
    object-fit: cover;

    background-color: grey;
}
img
{
max-height:100px;
max-width:100px;
}

<div>
     <div>

     <img src="https://dummyimage.com/50x50/000/fff">


     <div>
          <nav>
             <a href="/index.html#about">About</a>
             <a href="/index.html#portfolio">Portfolio</a>
             <a href="/index.html#contact">Contact</a>
          </nav>
     </div>
     </div>
.  ..
</div>

XxSTREKxX 5 Сен 2019 в 03:50

Выравниваем картинки по центру в HTML

Как выровнять картинки по центру?

Итак, как и любой начинающий верстальщик, вы сталкивались с проблемой: как выровнять картинки по центру веб-страницы? И тут идут разные ухищрения вроде использования тега center, который настолько устарел, что и говорить уже о нем не нужно.

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

Способ 1

Наиболее простой способ – это присвоить картинке класс, а затем, с помощью CSS сделать картинку блоком, после чего задать ей автоматическое выравнивание с правой и левой части.

HTML

<img src=»https://cdn0.iconfinder.com/data/icons/toys/128/teddy_bear_toy_5.

png» alt=»Центрируем изображение» />

CSS

.center-img { display: block; margin: 0 auto; }

.center-img {

display: block;

margin: 0 auto;

}

Кстати, этот способ позволяет выравнивать любые блочные элементы: div, p, заголовки.

И, сразу, посмотрите выравнивание на практике:

See the Pen Выравнивание изображений по центру by Alex (@Asmodey) on CodePen.

Этот способ удобен тем, что мы автоматически переносим изображение на следующую строку (поскольку задали ей display: block), и тем, что мы можем задать отступы от текста сверху и снизу с помощью изменения свойства margin.

Способ выравнивания 2

Второй способ, выравнивания изображения – это помещение картинки в параграф, которому мы присвоим класс. После чего, зададим параграфу выравнивание текста по центру.

HTML

<p>

</p>

CSS

.center-img { text-align: center; }

.center-img {

text-align: center;

}

И на практике:

See the Pen Выравнивание изображений способ 2 by Alex (@Asmodey) on CodePen.

В данном случае получается код CSS более лаконичным, но HTML содержит больше элементов. Если нравится – используем.

Третий способ

Данный вариант основан на новых семантических тегах HTML5 и его рекомендуется использовать если у вас есть возможность (и необходимость) завернуть картинку в тег figure.

Итак, есть изображение с подписью в теге figure. Поскольку figure — это блочный элемент, то просто задайте ему выравнивание по центру.

HTML

<figure> <img src=»https://cdn0.iconfinder.com/data/icons/toys/128/teddy_bear_toy_5.png» alt=»Центрируем изображение» > <figcaption>Толстый кот</figcaption> </figure>

<figcaption>Толстый кот</figcaption>

</figure>

CSS

figure { text-align: center; }

figure {

text-align: center;

}

И на практике

See the Pen figure выравниваем по центру by Alex (@Asmodey) on CodePen.

Вывод: мы рассмотрели три простых способа выровнять изображение по центру HTML страницы с помощью CSS. Если есть вопросы – пишите.

как обрезать изображение без изменения пропорций » Блог. ArtKiev Design Studio

При подготовке изображений для Web нередко появляется необходимость обрезать их, чтобы выделить нужные части изображения и отсечь ненадобные. Не считая чисто художественных суждений, такая обрезка либо, как ее еще именуют, кадрирование, нужна для уменьшения объема файла. Чем меньше изображение, тем меньше объем его файла, и тем резвее оно загружается на web страничку.Нередко возникает надобность заключать изображения в блок зафиксированного объема. В предоставленном случае возникает неувязка: как записать картину в блок в отсутствии утраты соотношения.Естественно, разрешено отрезать и масштабировать рисунки по прибавления их на интернет-сайт либо кадрировать на серверном языке (к примеру PHP), а разрешено изготовить некоторый «аналог» на обычный CSS. В предоставленном случае, отрезка станет проистекать сообразно вертикали. То имеется, сообразно ширине картина станет проникать вполне, а сообразно вышине обрезаться.

Сущность предоставленного способа в том, будто картина станет вписана в блок конкретных объемов. Все будто никак не станет проникать в данный блок станет укрыто. Обрамляющий блок станет обладать те ведь наиболее характеристики, будто и картина. Потому, его разрешено станет владеть и сглаживать этак ведь, как и обыденную картину. Вариант, естественно, никак не безупречный, однако действующий.

<style>
  .img {
    display: inline-block;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 5px solid #FFFFFF;
    background: #FFFFFF;
    outline: 1px solid #CCCCCC;
    margin: 10px;
  }
  .img img {
    width: 200px;
    border: none;
    margin: 0;
    padding: 0;
  }
</style>

<div>
  <img src="/img/artkiev. png" alt="">
</div>

Оригинал:

Что получилось:

Позиционирование текста на картинке в CSS

Я часто вижу в комментариях к урокам или на форумах, когда новички спрашивают: «Я хочу разместить текст поверх картинки, а он оказывается под или над картинкой. Помогите.» Давайте рассмотрим на конкретном примере, как написать текст на картинке в любом месте.

Нам надо рядом с каждым овощем, на иллюстрации ниже, подписать его название. Задача вроде бы простая, но поверьте, может свести с ума любого начинающего веб-мастера.

Я умышленно для примера взял большую картинку 1280×733, чтобы заодно показать, как её адаптировать под разные разрешения экранов. Уже прошли те времена, когда достаточно было научиться верстать только под десктопные разрешения. Делая верстку, следует сразу позаботиться об адаптивности.

HTML-разметка

Первым делом создаем контейнер для овощной картинки и для надписей. Обратите внимание, что каждую надпись мы помещаем в отдельный блок с разными классами. И это логично, поскольку все надписи будут иметь свои координаты на странице, а мы будем управлять ими, прописывая свойства в дивах.


<div>

  <img src="vegetables.png" alt="vegetables">

  <div>Лук</div>

  <div>Картошка</div>

  <div>Морковка</div>

</div>

После сделанной HTML-разметке, мы видим только фрагмент картинки и текст, оказавшийся под картинкой. Знакомая картина, не правда ли?

Картинка разъехалась на все свои немаленькие пиксели и появилась горизонтальная полоса прокрутки, но к счастью это легко исправить, задав ширину картинке 100%, тем самым сделав её адаптивной. Хотя бы одну проблему решили.


img {

  width: 100%;

}

Теперь займемся текстом.

CSS-стили

В стилях контейнера, ключевым будет свойство position: relative. Этим мы меняем правила и просим вести отсчет координат не от верхнего левого угла окна браузера, а от угла контейнера, который является родителем для всех вложенных в него элементов и занимает 90% окна.


.container {

  width: 90%;

  position: relative;

  text-align: center;

  color: #000;

  font-family: arial black;

  font-size: 250%;

}

Дальше будем позиционировать надписи, просто подбирая в системе X/Y нужные координаты, делать подбор удобно в Chrome / Инструменты разработчика, копируя и вставляя код в файл со стилями.


.left {

  position: absolute;

  top: 26%;

  left: 6%;

}.center {

  position: absolute;

  top: 17%;

  left: 42%;

}
.right {

  position: absolute;

  top: 1%;

  right: 27%;

}

Мы задали координаты не в пикселях, а в % не случайно, при уменьшении размеров экрана, тогда текст будет оставаться там же, где мы его закрепили. Это хорошая новость, а плохая это то, что размер текста не уменьшается вместе с картинкой. Картинка сама уменьшается, а текст надо уменьшать принудительно.

Медиа-запросы

На разрешении равным или меньше 768 пикселей, уменьшить размер шрифта до 150%. Откуда мы узнали, что надо уменьшать именно на 768 пикселях? Через инспектор кода, мы увидели, на какой отметке текст наскакивает на соседние элементы.


@media screen and (max-width: 768px) {

  .container {

    font-size: 150%;

}

}

Одного запроса оказалось недостаточно, уменьшили размер текста и на 470 пикселях.


@media screen and (max-width: 470px) {

    .container {

    font-size: 90%;

}

}

Конечный результат

Посмотрите на реальной странице, как прекрасно смотрится текст на картинке на разных разрешениях.

Демонстрация.

Из данного видео-курса «HTML5 и CSS3 с Нуля до Гуру»вы получите систематизированные знания о том, как делаются сайты, на простых примерах.

Создано 19.10.2018 10:22:00
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Свойство content • Про CSS

С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after, но не менее важную роль в этом играет свойство content.

Оно определяет содержимое псевдоэлементов. И даже больше, псевдоэлементы не отобразятся, если у них не задано свойство content. Достаточно такой строки:

Спецификация тут: w3.org/TR/css3-content/

Снеговики в примере добавлены с помощью content для псевдоэлементов, сами снеговики — символы юникода:

DIV:before {
  content: "\2603";
}

Возможные значения свойства:

normal, none — содержимое псевдоэлемента не отображается. Полезно, если нужно скрыть ранее заданный псевдоэлемент.

<string> — текстовый контент. Можно вставлять простой текст и символы юникода, как в примере выше. Для практических целей очень пригодятся разные варианты стрелок. Символы юникода можно найти, например, тут или тут.

DIV:before  {
  content: "Hello";
}

<uri> — адреса картинок.

DIV:before  {
  content: url(//img-fotki.yandex.ru/get/5413/5091629.67/0_5ba12_81d03a82_XS.png);
}

Практическое применение — иконки перед ссылкам на профили в соцсетях, иконка для обозначения внешней ссылки, буллеты списков.

Правда, тут появляется проблема лишних запросов к серверу.

Варианты решений:

спрайт, иконки из которого вставляются фоном в саму ссылку или в псевдоэлемент. Второе предпочтительней, потому что тогда псевдоэлемент ограничит область видимости спрайта, таким образом иконки в спрайте могут быть расположены не только вертикально, но и рядами.
Количество запросов к серверу уменьшается до одного, но при этом картинка кешируется у пользователя;
закодировать отдельные картинки в base-64 и вставлять через content: url();
закодировать весь спрайт в base-64 и использовать его как фон для псевдоэлемента.

В двух последних вариантах вообще не будет запросов к серверу, но картинки не кешируются и, кроме того, закодированное изображение может весить больше исходного. Способ имеет смысл использовать только для небольших изображений.

Закодировать картинку в base64 можно с помощью онлайн-сервисов. Полученный код вставляется в url() с информацией о формате содержимого, например data:image/png;base64.

Вот так будет выглядеть код для иконки Instagram:

[href*="instagram.com"]:before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQTgwMTE3NDA3MjA2ODExODA4Mzk4RDI3RDIwODg4MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NjAxNEU1NjQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NjAxNEU1NTQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk3MDc3Njg4MTUyMDY4MTE4MDgzOThEMjdEMjA4ODgyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBODAxMTc0MDcyMDY4MTE4MDgzOThEMjdEMjA4ODgyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++UbndwAAArdJREFUeNqUk0tME1EUhr+ZDoW2tBS0vLQCkqgLE4X4DBoBFxIXBqNCQI0rF8TEhS5MNC4MLkxcGRb4jonxFVApKBJNZCG+giJddAEoUEEWAikI9t2OMxeKJLrhZE7mPv7vv3fmniud2lN0EKjTspylxWstGxVVVU+szywoNRFkcHMa7nAxiqEYJjo5vtLwX1JjGBkZLXf3fJEVSZJKDcEwUSlELBIiHAkTisYxBkP4ff5/4BPX28X70pFydFbRO9FIBEWJEY/HialxpKkh+NFP0+CMEGdazazJyiDLZsFss6NqY+FAUMwJg0g4jCLFtb3FUIb7yQp+Zn/tYXz+KMHfs+QsT+Pp4wc4fk5SX7lJgNOTE3MGssXIwO9pCECwM0Ce00pZ5TFOnbuIxWpjwjeprTbL5frzdHe94nV3LynaQnrorJLqsLKv7igGay5Njx5SuruCutMXKCutITcnh9Rlybzpc3O24SZ3Lp7hZXsL1TW1xGbGaG2+i6wYZBwZNpwrsvF6h/H0DeFcvY5u93s8X0doedeLkreW6YAk5rxer9DqjM4q8wcjjkZ7SLXbGR8fIxhSCclx+j99YSZ7Pct2HSLZZNbPUGgRv3L+J4q2Npi/yklBpo3v3zyoRgujz64ip6Tz7cVtMvIzKdx7gOH8PKGd55EThaHn9i2baWtzcf/GFaKzPuQkI/6JAZga5NbJI7S6ngiNurAL/n6CnhuKNuLxeGhtacJ1twGf7xfJaQ7Mcpjme9cozHMKTUK/yGAujCkpVFVX8eFtF89dLYz7psS4I91OWclWtpXsEJrFIQzUWAQ1HkOWDVhsNnaWlVNUXEzAP1fKJrOZ1DS7gLXyFVqdSRh0DPX1VBRoDcmQtOBs0u6RyZro+YnN+tHqicSCGqM3O3SDxq6PbrSsWOJ17tDZPwIMAKAIId5/sWegAAAAAElFTkSuQmCC)
}

Код длинный и заканчивается где-то за горизонтом. Кроме того, по коду непонятно что за картинка в нём лежит, и, при необходимости отредактировать, картинку надо будет каждый раз кодировать и вставлять заново, хотя в случае с обычным изображением его надо будет просто перезалить. В то же время есть плагин для гранта, который автоматически кодирует картинки и заменяет в коде адреса картинок на base64.

Подобным же образом можно вставлять SVG.

DIV:before{
	content: url('data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg">&lt;path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0-0.781 0.781-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h29.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z" fill="#FFF" />&lt;/svg>');
	}

Это очень удобно, но пока что работает не во всех браузерах. Например, Chrome такое поймет и отобразит, а Firefox — нет.

Upd: SVG в CSS будет работать во всех браузерах, если закодировать его как адресную строку. Это можно сделать с помощью URL Encoder.

<counter> — счетчик. С помощью этого значения можно пронумеровать не только списки, но и любые элементы на странице. Например, разделы статьи.

BODY {
  counter-reset: h3-counter;
  counter-reset: p-counter;
}

DIV {
  counter-increment: h3-counter;
}

h3:before {
  content: counter(h3-counter) ". ";
}

P:before {
  content: counter(p-counter) ". ";
  counter-increment: p-counter;
}

counter-reset задает имя счетчика.

counter-increment увеличивает значение заданного счетчика.

content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.

attr(<identifier>) — это значение выводит содержимое заданного атрибута. Удобно использовать для вывода атрибутов href в версии для печати и для разных интересных эффектов.

A:before  {
  content: attr(title);
}

Много эффектов можно найти тут: tympanus.net/Development/CreativeLinkEffects/

open-quote, close-quote — значения для вывода открывающих и закрывающих кавычек. Символы, которые будут использованы, определяются свойством quotes. Если оно не задано, будут использованы значения по умолчанию, которые зависят от браузера.

BLOCKQUOTE {
	quotes: '"' '"' "'" "'";
}
BLOCKQUOTE:before {
  content: open-quote;
  }
BLOCKQUOTE:after  {
  content: close-quote;
  }

no-open-quote, no-close-quote — значение отключает отображение кавычек, но при этом продолжает учитываться уровень их вложенности.

В спецификации есть ещё много интересного вроде псевдоэлемента, представляющего обертку для всего элемента или множественные псевдоэлементы, но в данный момент это нигде не реализовано.

Адаптивное изображение на CSS

С развитием информационных технологий все больше адаптивности требуется от создаваемых сайтов. Адаптивность, собственно заключается в возможности сайта подстраиваться под мобильные телефоны и планшеты. При этом некоторые создаются специальные – мобильные версии сайтов. Но все более популярным становиться создания таких сайтов, которые сами перестраиваются под мобильную версию.

Часто у разработчиков возникает следующая проблема. Сайт адаптивной и подстраивается под разрешение экрана в мобильных телефонах, но вот проблема – изображения в статье не желают уменьшатся, а вылезают за область просмотра. Это является, во-первых, не удобным для пользователя, а во-вторых указывает на погрешности в разработке, ну и, естественно, на сам статус сайта и разработчика. Ведь все представление складывается из мелочей.

Итак, как решить эту проблему средствами каскадных таблиц стилей – CSS.

Вариант 1. Работает только на отдельных изображениях.

В CSS файле создать класс img-adaptive со следующими параметрами:

.css-adaptive { display: block; max-width: 100%; height: auto; }

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

<img src=”images/1.jpg” class=”css-adaptive”>

При этом изображение пудет подстраиваться под ширину блока в которое оно помещается. Но этот способ работает только на те изображения, в которые подставляется класс css-adaptive.

Вариант 2. Работает на все изображения в определенном блоке.

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

Итак, нужно поместить все новости в контейнер div например с классом news.

<div class=”news”> <h2>Адаптивность изображений в CSS</h2> <img src=”imahes/1.jpg”> <img src=”imahes/2.jpg”> <img src=”imahes/3.jpg”> </div>

А в файл с CSS следующее:

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

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

Поделиться в соц. сетях:

Соответствие объекта CSS Свойство

Свойство CSS object-fit используется для определения того, как Размер или

Соответствие объекта CSS Свойство

Свойство CSS object-fit используется для указания того, как или

Это свойство указывает содержимому заполнить контейнер различными способами; такой как «сохранить это соотношение сторон» или «растянуть и занять столько места, сколько возможный».

Посмотрите на следующее изображение из Парижа. Это изображение имеет ширину 400 пикселей и высоту 300 пикселей:

Однако, если мы стилизуем изображение выше на половину его ширины (200 пикселей) и такой же высоты (300 пикселей), это будет выглядеть так:

Мы видим, что изображение сжимается, чтобы поместиться в контейнер размером 200×300 пикселей. (его исходное соотношение сторон уничтожено).

Здесь появляется свойство object-fit дюйм. Свойство объектного соответствия может принимать одно из следующие значения:

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

Использование object-fit: крышка;

Если использовать object-fit: cover; изображение сохраняет свое соотношение сторон и заполняет данное измерение.Изображение будет обрезано по размеру:

Использование object-fit: contain;

Если мы используем object-fit: contain; изображение сохраняет свое соотношение сторон, но его размер изменяется в соответствии с заданным размером:

Использование подгонки объекта: заливка;

Если мы используем object-fit: fill; изображение изменен, чтобы заполнить заданный размер. При необходимости изображение будет растянуты или сжаты по размеру:

Использование объектной подгонки: нет;

Если мы используем object-fit: none; изображение не изменен размер:

Использование подгонки объекта: уменьшение масштаба;

Если мы используем object-fit: scale-down; изображение уменьшено до самой маленькой версии нет или содержать :

Пример

img {
width: 200px;
высота: 300 пикселей;
соответствие объекта: уменьшение масштаба;
}

Попробуй сам »

Другой пример

Здесь у нас есть два изображения, и мы хотим, чтобы они занимали 50% ширины окна браузера и 100% высоты.

В следующем примере мы НЕ используем object-fit , поэтому, когда мы изменяем размер окна браузера, соотношение сторон изображений будет уничтожено:

В следующем примере мы используем object-fit: cover; , поэтому, когда мы изменяем размер окна браузера, соотношение сторон изображений сохранилось:

Соответствие объектам CSS Другие примеры

В следующем примере показаны все возможные значения свойства object-fit . в одном примере:

Пример

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

Попробуй сам »

CSS Object- * Свойства

В следующей таблице перечислены свойства объекта CSS — *:

Имущество	Описание
пригонка объекта	Определяет, как изменить размер или
объект-позиция	Задает расположение или

Автоматическое изменение размера изображения для размещения в HTML-элементе Div с помощью CSS

Автоматическое изменение размера изображения (img), чтобы оно соответствовало меньшему Div, может быть достигнуто с помощью простого CSS или CSS3.В этом руководстве я объясню способы использования CSS и CSS3 на простом примере HTML.

 / * CSS для элементов div и тегов img * /

img {
максимальная ширина: 100%;
максимальная высота: 100%;
}

.auto-resize-portrait {
высота: 80 пикселей;
ширина: 50 пикселей;
}

.auto-resize-landscape {
высота: 30 пикселей;
ширина: 80 пикселей;
}

.auto-resize-square {
высота: 75 пикселей;
ширина: 75 пикселей;
}

.auto-resize-big {
ширина: 150 пикселей;
высота: 150 пикселей;
}

В первом div ширина и высота нашего изображения автоматически изменяются, чтобы поместиться в элемент div 50 * 80 пикселей (фактический размер изображения 100 * 100), т.е. размер изображения автоматически изменяется до 50 * 50 пикселей

И во втором div, размер изображения автоматически изменяется до 30 * 30 пикселей.

В третьем div, то есть div с классом .auto-resize-square, размер изображения автоматически изменяется до 75 * 75.

В последнем div мы дали ширину и высоту элемента div больше, чем размер нашего изображения, в этом случае размер изображения не будет автоматически изменяться и отображаться как его размер, то есть 100 * 100 пикселей.

В приведенных выше примерах изображение будет помещено в родительский элемент div без его масштабирования. Скажем, например, размеры нашего изображения 100 * 100, что означает соотношение ширины к высоте 1: 1.

В первом div ширина составляет 50 пикселей, а высота — 80 пикселей, т.е. максимальная ширина изображения может составлять всего 50 пикселей, так как отношение ширины изображения к высоте составляет 1: 1, поэтому высота настраивается на 50 пикселей.

И во втором div высота 30 пикселей и ширина 80 пикселей. Максимальная высота изображения может составлять всего 30 пикселей, а ширина — 30 пикселей.

В последнем div, то есть div с классом .auto-resize-big, максимальная доступная высота и ширина изображения составляют 200 пикселей. Но реальные размеры изображения всего 100 * 100 пикселей. Так отображается как есть.

Автоматическое изменение размера изображения с помощью CSS3 (современные веб-браузеры):

Для автоматического изменения размера изображения с помощью CSS3 в современных веб-браузерах используйте приведенную ниже простую одну строку кода CSS3, изображение будет автоматически изменено, чтобы соответствовать родительскому элементу div.

 / * Пример CSS3 * /

img {
высота: 100%;
ширина: 100%;
соответствие объекта: содержать;
}

Мы должны указать ширину и высоту тега изображения как 100%. И добавьте значение свойства объектного соответствия как contain.

Но разница в том, что если размер родительского div больше, чем размер изображения, тогда размер изображения будет автоматически изменен до размера родительского элемента div.

В этом случае размеры нашего изображения составляют 100 * 100, а размер элемента div — 200 * 200. Размер изображения автоматически увеличивается до 200 * 200. Четкость изображения снизится.См. Ниже Демо

Автоматическое изменение размера изображения с использованием css Пример демонстрации:

Просмотрите демонстрацию и поймите разницу между способами css и css3.

Автоматическое изменение размера изображения с помощью демонстрации CSS

Автоматическое изменение размера изображения с помощью css

Подождите, прежде чем уйти. почему вы не можете подписаться на меня в Твиттере, стать другом на Facebook или связаться со мной по ссылке?

object-fit — CSS: каскадные таблицы стилей

Свойство object-fit CSS устанавливает, как содержимое заменяемого элемента, такого как или , должно быть изменено, чтобы соответствовать его контейнеру.

Вы можете изменить выравнивание объекта содержимого замененного элемента в пределах поля элемента, используя свойство object-position .

Свойство объектного соответствия задается как одно ключевое слово, выбранное из списка значений ниже.

Значения

содержат: Замененное содержимое масштабируется для сохранения соотношения сторон при размещении в поле содержимого элемента. Весь объект заполняет коробку, сохраняя при этом его соотношение сторон, поэтому объект будет «в почтовом ящике», если его соотношение сторон не совпадает с соотношением сторон коробки.
крышка: Размер замененного содержимого изменяется таким образом, чтобы сохранить его соотношение сторон при заполнении всего поля содержимого элемента. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет обрезан по размеру.
заполнить: Размер замененного содержимого соответствует размеру окна содержимого элемента. Весь объект полностью заполнит коробку. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет растянут по размеру.
нет: Размер замененного содержимого не изменяется.
в уменьшенном масштабе: Размер содержимого задается так, как если бы не было указано или содержит , в зависимости от того, что приведет к уменьшению размера конкретного объекта.

 заполнить | содержать | крышка | нет | scale-down

Установка размера объекта для изображения

HTML

  <раздел>
    размер объекта: заливка  
  

  

    соответствие объекта: содержать  
  

  

    размер объекта: крышка  
  

  

    размер объекта: нет  
  

  

    размер объекта: уменьшение

CSS

  h3 {
  семейство шрифтов: Courier New, моноширинный;
  размер шрифта: 1em;
  маржа: 1em 0 0,3em;
}

img {
  ширина: 150 пикселей;
  высота: 100 пикселей;
  граница: 1px solid # 000;
  маржа: 10px 0;
}

.узкий {
  ширина: 100 пикселей;
  высота: 150 пикселей;
}

.наполнять {
  соответствие объекта: заполнить;
}

.содержать {
  соответствие объекта: содержать;
}

.покрытие {
  объект подходит: крышка;
}

.никто {
  соответствие объекта: нет;
}

.уменьшать {
  соответствие объекта: уменьшение масштаба;
}

Результат

Таблицы BCD загружаются только в браузере

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

Иногда требуется уместить изображение в определенное заданное измерение.Мы можем изменить размер изображения, указав ширину и высоту изображения. Распространенное решение — использовать max-width: 100%; Высота и : авто; , чтобы большие изображения не превышали ширину своего контейнера. Свойства CSS max-width и max-height работают лучше, но они не поддерживаются во многих браузерах.

Другой способ изменения размера изображения — использование свойства подгонки объекта , которое соответствует изображению. Это свойство CSS определяет, как размер видео или изображения изменяется в соответствии с его блоком содержимого.Он определяет, как элемент помещается в контейнер с установленной шириной и высотой.

Свойство подгонки под объект обычно применяется к изображению или видео. Это свойство определяет, как элемент реагирует на ширину и высоту своего контейнера. В основном есть пять значений свойства объектно-подходящего объекта , например fill, contain, cover, none, scale-down, initial , и наследовать . Значение этого свойства по умолчанию — «заливка» .

Пример

В этом примере мы изменяем размер изображения, используя max-width: 100%; Высота и : авто; объектов недвижимости.

заполнение ячейки <стиль> div { ширина: авто; выравнивание текста: центр; отступ: 15 пикселей; граница: сплошной красный цвет 3px; } img { максимальная ширина: 100%; высота: авто; }

Проверить это сейчас
Выход
Пример
В этом примере мы используем object-fit: cover; недвижимость.
<стиль> div { ширина: 300 пикселей; высота: авто; выравнивание текста: центр; отступ: 15 пикселей; граница: сплошной красный цвет 3px; } img { объект подходит: крышка; }

Проверить это сейчас
Выход
В приведенном выше примере мы использовали значение cover свойства object-fit .Как и в приведенном выше примере, мы можем использовать другие значения свойства object-fit , чтобы изменить размер изображения.
Как автоматически изменить размер изображения, чтобы оно поместилось в DIV без растяжения?
Если вы разрабатываете адаптивную веб-страницу или гибкую веб-страницу, вы наверняка столкнулись бы со сценариями, в которых вы хотели бы уместить большое изображение в меньший DIV, не искажая его и не нарушая соотношения сторон. Что ж, это легко сделать с помощью свойства max-width .
Предположим, у меня есть изображение шириной 768 пикселей, и я хочу уместить его в DIV с шириной 320 пикселей. Назовем DIV «фигурой-контейнером». Чтобы поместить изображение в DIV «фигура-контейнер», я должен использовать для изображения свойство max-width . Следовательно, мой CSS может выглядеть примерно так:
.figure-container img { максимальная ширина: 100%; дисплей: блок; высота: авто }
Это гарантирует, что ширина изображения не превышает 100% ширины DIV.Это означает, что мое изображение размером 768 пикселей теперь вписывается в 320 пикселей DIV при сохранении соотношения сторон. Однако помните, что в зависимости от вашего сценария вам, возможно, также придется использовать свойство display . Вы можете установить отображение на блок или встроенный блок .
Другой способ сделать это — использовать свойство подгонки объекта на изображении.
Как подогнать изображение в div с помощью CSS object-fit?
Вы также можете использовать свойство object-fit CSS3, чтобы соответствовать вашему изображению в родительском DIV.Все, что вам нужно сделать, это добавить к изображению свойство соответствия объекта. Свойство «Подгонка объекта» имеет 4 значения:
1. заливка — Это растянет изображение, чтобы оно поместилось в поле содержимого.
2. содержат — изображение будет увеличиваться или уменьшаться для заполнения поля содержимого при сохранении соотношения сторон.
3. cover — Это заполнит поле содержимого изображением с сохранением соотношения сторон, но может обрезать изображение в этом процессе.
4. нет — Изображение сохранит исходные размеры.
5. с уменьшением масштаба — Размер изображения будет таким же, как при использовании свойства none или contain при создании наименьшего размера конкретного объекта.
.figure-container img { ширина: 100%; высота: 100%; соответствие объекта: содержать; / * Это может быть одно из 5 значений сверху * / }
Когда вы используете свойство object-fit для размещения изображения в DIV, вам придется использовать его вместе с одним из fill , cover или , содержащих значение .Однако обратите внимание, что поддержка object-fit на разных устройствах и браузерах все еще развивается, поэтому, пожалуйста, проверьте поддержку браузера, прежде чем использовать его. Есть несколько полифиллов, доступных для объектной подгонки, однако, пожалуйста, попробуйте их, прежде чем вы действительно начнете использовать его на реальном сайте.
Пример: поддержка изображений с неизвестными размерами
Примеры документации
Введение
Этот пример демонстрирует, как можно встраивать изображения с неизвестными размерами в страницу AMP, сохраняя при этом правильное соотношение сторон.
Фон
Чтобы избежать скачков страниц при загрузке страницы AMP, система статического макета среды выполнения AMP требует, чтобы высота всех элементов была известна заранее. Вот почему для расширения amp-img требуется указать ширину и высоту изображения:

Расширение amp-img поддерживает различные макеты.Адаптивный макет требует ширины и высоты, чтобы иметь возможность определять соотношение сторон изображения.

Макет с фиксированной высотой требует только высоты, но растягивает изображение, чтобы заполнить доступную ширину:

Макет fill — единственный макет, поддерживаемый amp-img , для которого не требуются никакие размеры изображения.Однако изображения будут растянуты в обоих измерениях, чтобы заполнить контейнер:

Возникает вопрос: как можно встраивать изображения с неизвестными размерами в страницы AMP, сохраняя при этом их правильное соотношение сторон?
Object-Fit спешит на помощь
Мы можем решить эту проблему, объединив макет заливки AMP со свойством CSS object-fit.Свойство object-fit помогает нам гарантировать, что изображение сохраняет свое соотношение сторон при изменении размера с помощью макета fill .
Сначала нам нужно определить контейнер, чтобы ограничить максимальный размер изображения, например:
.fixed-container { положение: относительное; ширина: 200 пикселей; высота: 200 пикселей; }
Затем мы можем использовать свойство object-fit , чтобы определить, как img внутри расширения amp-img будет изменять размер для сохранения соотношения сторон:
amp-img.содержать img { соответствие объекта: содержать; }
object-fit: contain увеличивает или уменьшает размер изображения для заполнения контейнера с сохранением соотношения сторон изображения.

С object-fit: cover изображение заполнит высоту и ширину своего контейнера, но сохранит соотношение сторон за счет обрезки изображения:

Макет с фиксированной высотой и правильным соотношением сторон
Этот подход работает также с адаптивными размерами контейнера, например, с динамической шириной:
.fixed-height-container { положение: относительное; ширина: 100%; высота: 300 пикселей; }
В результате получается макет с фиксированной высотой с правильным соотношением сторон изображения:

Карусели изображений
Этот подход также очень хорошо работает для каруселей изображений, комбинируя его с amp-carousel , используя макет с фиксированной высотой .

Круглые изображения с CSS
В этом руководстве мы рассмотрим некоторые методы CSS для визуализации круговых элементов .Основное свойство CSS, отвечающее за эффект, — это border-radius .
Хотя применить эффект к квадратным изображениям довольно просто, для прямоугольных изображений потребуется немного больше усилий.
Посмотреть демо
Загрузить исходный код
Квадратные изображения
Для идеально квадратного элемента img требуется всего одна строка CSS. Этот метод лучше всего работает с квадратными изображениями.
HTML

УСС
. Кругло - квадрат { радиус границы: 50%; }
Правило стиля выше является сокращением для:
. Кругло - квадрат { граница-верх-левый-радиус: 50% 50%; граница-верх-правый-радиус: 50% 50%; граница-нижний-правый-радиус: 50% 50%; граница-нижний-левый-радиус: 50% 50%; }
Установив для всех свойств border-radius значение 50% ширины / высоты квадратного элемента img , мы в конечном итоге формируем элемент img в виде круга:
Прямоугольные изображения
Прямоугольные изображения немного сложнее.
Чтобы визуализировать круг, изображение должно начинаться с квадрата.
Чтобы обойти проблему, мы можем обернуть элемент img в квадратный элемент div . Затем мы «вырезаем» части элемента img , которые выходят за пределы квадратной оболочки div . Мы можем сделать это, установив для свойства overflow оболочки div значение hidden .
Чтобы объект фотографии с меньшей вероятностью был обрезан, мы также должны обрабатывать альбомные фотографии (которые представляют собой горизонтально ориентированные прямоугольники) иначе, чем портретные фотографии (которые представляют собой вертикально ориентированные прямоугольники).
Изображения с альбомной ориентацией
HTML

УСС
.circular - пейзаж { дисплей: встроенный блок; положение: относительное; ширина: 200 пикселей; высота: 200 пикселей; переполнение: скрыто; радиус границы: 50%; } .circular - пейзаж img { ширина: авто; высота: 100%; маржа слева: -50 пикселей; }
Значения свойств width и height должны совпадать с , так что оболочка div (.круговой - пейзаж ) отображается как квадрат.
Кроме того, значения свойств width и height должны быть равны или меньше высоты для img . Это гарантирует, что элемент img может занимать обертку div , не растягиваясь.
Обычно объект пейзажных фотографий — но не всегда — располагается вокруг центра композиции. Чтобы дать нам наилучший шанс не обрезать объект фотографии, мы можем центрировать элемент img по горизонтали в оболочке div , сдвинув элемент img влево, чтобы компенсировать обрезку с левым смещением.
Величина, на которую мы подталкиваем элемент img , равна 25% ширины / высоты оболочки div . В этом случае мы сдвинем изображение на 50 пикселей (25% от 200 пикселей — 50 пикселей) влево. Мы можем добиться этого, установив для свойства margin-left элемента img отрицательное значение:
margin-left: -50px;
Предположение о том, что объект фотографии будет близко к центру композиции, не всегда будет верным .Лучше всего помнить об этом предположении, когда вы выбираете (или редактируете) изображения для этой техники.
Портретно-ориентированные изображения
HTML

УСС
.circular - портрет { положение: относительное; ширина: 200 пикселей; высота: 200 пикселей; переполнение: скрыто; радиус границы: 50%; } .круговой - портрет img { ширина: 100%; высота: авто; }
Предположение, которое мы сделаем для портретно-ориентированных изображений, состоит в том, что объект фотографии находится в верхней центральной части композиции. Опять же, это не относится к каждой портретной фотографии.
Подобно альбомным фотографиям, оболочка div для элементов img с портретной ориентацией должна иметь равные значения свойств width и height , чтобы оболочка представляла собой идеальный квадрат.
На этот раз значение свойства width / height должно быть равно или меньше width элемента img , чтобы изображение могло покрывать оболочку div , не растягиваясь.
Для изображений с портретной ориентацией мы назначаем высоту авто и ширину 100%. (Мы сделали обратное для изображений с альбомной ориентацией.)
Нам не нужно перемещать элемент img , потому что мы ожидаем, что объект фотографии находится в центре верхней части композиции.
Резюме
Эту технику лучше всего использовать для квадратных элементов img , при этом объект находится в мертвой центре фотографии. Но мы живем не в идеальном мире, поэтому при необходимости вы можете использовать оболочку div для прямоугольных элементов img .
Основным свойством CSS, отвечающим за круглую форму, является свойство border-radius . Установка радиуса углов на 50% от ширины / высоты приводит к кругу.
Чтобы получить еще больше советов по цифровому маркетингу, подпишитесь на электронную почту, которой доверяют более
150 000 других маркетологов: Revenue Weekly.

Css вписать картинку в div: CSS: вписываем изображение в область — Блог