Как изменить размер картинки в html

Размер картинки в html: как им управлять?

От автора: приветствую вас. Картинки — практически один из самых важных элементов на веб-страницах. Благодаря им нам значительно проще и интереснее воспринимать то, что мы видим на экране. Но если заводить речь об их встраивании в веб-страницы, то нужно знать как минимум то, как управлять размером картинки в html. Именно об этом мы сегодня поговорим.

Способы задать размер изображениям

Будем смотреть все на очень простом примере. Вот такой есть код:

Это блок с идентификатором, внутри которого лежит картинка. Предположим, что наш блок имеет фиксированные размеры. Для наглядности зададим еще и красную рамку, чтобы четко видеть его границы:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Итак, ширина блока — 200 пикселей, а высота — 160. И вот нам нужно, чтобы в него вписалось фото. Но величины ее, допустим, мы не знаем. Ну ладно, я могу вам сказать, что я сделал примерно 300 на 200 пикселей, в таком случае фото попросту не влезет в блок. Давайте посмотрим, что будет:

На этом скриншоте очень четко видно, что оно выходит за пределы красной рамки, то есть не вписывается в блок, в котором должно находиться внутри. Каким образом можно исправить ситуацию?

Предположим, что фото лежит на сервере и изменить непосредственно ее ширину и высоту нельзя. В таком случае один из вариантов — задать фиксированную ширину и высоту картинке с помощью атрибутов тега img: width и height.

Обратите внимание

Вот, теперь все идеально вписалось в блок, потому что теперь имеет такие же параметры, как и он сам. Но помните одну важную деталь: если вы сами прописываете и ширину и высоту, то, скорее всего, нарушаете пропорции. Чтобы не нарушать их, нужно прописать только одно значение (ширину). Тогда второе браузер посчитает сам, не нарушая пропорций.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Теперь изображение по высоте занимает не все доступное место, но зато ее пропорции не нарушены.

Собственно, такой способ задания размера (прямо в html через атрибуты) годится лишь в том случае, когда вы работаете с каким-то конкретным изображением на конкретной страницы. Если размеры необходимо определить группе картинок, намного правильнее использовать отдельной файл стилей, в котором прописывать все необходимые правила.

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

Как сделать в css адаптивные картинки?

Для этого уже давно веб-разработчики и верстальщики используют такой достаточно простой код:

То есть максимальная ширина 100% от размеров родительского контейнера, автоматическая высота (браузер рассчитывает сам, не нарушая пропорций) и блочное отображение. Последнее вовсе не обязательно и если его удалить, это никак не скажется на поведении картинок.

Если удалить атрибут width из html-кода, то результат будем аналогичным:

Но заметьте, что при изменении размеров блока-контейнера изображение растягивается уже на новые размеры, без нарушения пропорций. При этом, если вы попробуете уменьшить размеры блока, картинка не вылезет за него, а все так же послушно будет вписываться в него по ширине. Вот таким образом мы делаем “резиновые” и, по сути, адаптивные картинки.

Итак, сегодня я показал вам, как управлять размером картинок в html и css. Используйте эти знания и изображения на ваших сайтах будут смотреться ровно и красиво.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Источник: https://webformyself.com/razmer-kartinki-v-html-kak-im-upravlyat/

Картинки в HTML – шпаргалка для новичков

Назначение размеров картинки в HTML

Для того чтобы изменить размеры отображения графического файла, используют теги height и width, где height — высота, а width — ширина, измеряемые в пикселях.

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

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

Важно

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

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

Например:

или

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

Для этого достаточно указать значение только одного из параметров (ширины или высоты), а значение второго браузер вычислит в автоматическом режиме.

Расположение картинки в HTML

Как и ко многим тегам HTML, к

применим атрибут align, который выполняет выравнивание изображения: — картинка располагается выше текста; — картинка располагается ниже текста; — картинка располагается слева от текста; — картинка располагается справа от текста.

Картинка-ссылка

В HTML для создания ссылки используется тег :

Имя ссылки

Для того чтобы задать графическую ссылку, необходимо всего лишь объединить тег изображения с тегом ссылки.

Делается это следующим образом:

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

Как можно сделать картинку фоном в HTML?

Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx”, где xxx — адрес картинки, указанный таким же способом, как в примерах выше.

Для примера зададим такую текстурную картинку в роли фоновой:

Сохраните изображение в папке с заготовленной заранее страницей и пропишите следующие строки:

Фон с текстом.

Фоновая картинка на странице задана.

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

Желаем удачи!

Источник: https://www.internet-technologies.ru/articles/kartinki-v-html-shpargalka-dlya-novichkov.html

Изображения и их свойства в CSS

<\p>

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

Отступы от изображения

Для наглядности приведу пример где будет много текста, и вы увидите какие отступы от изображения бывают в данном примере мы будем использовать свойство margin которое даст вам возможность оценить его возможности.

<\p>

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

<\p> <\p>

В браузере мы видим следующее:

Отступы от изображения в данном примере я сделал благодаря параметру margin который задал нам отступы от всех четырех краев по 20 пикселей. Здесь можно сделать более хитрую манипуляцию, можно задавать отступ от конкретного края, например:

  • margin-top – отступ от верхней стороны
  • margin-right – отступ от правой стороны
  • margin-bottom – отступ от нижней стороны
  • margin-left – отступ от левой стороны

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

Рамка вокруг изображения

В браузере:

Задаем рамку вокруг изображения, благодаря параметру border для начала зададим ширину рамки с помощью border-width задаем её в пикселях, далее стиль рамки, то есть её вид border-style здесь есть несколько значений выбирать вам:

И последний параметр, который мы будем регулировать это цвет рамки, который задается параметром border-color.

Изображение как фон

В браузере видим:

Как вы поняли мы присвоили фон тегу body благодаря селектору тегов, так как он у нас занимает весь документ, так же мы можем присвоить и другим тегам. Параметр background сделал нам фон рисунком адрес к которому мы прописываем в скобочках. Так же можно и манипулировать с фоном например:

background: url(proba.png) repeat-x;

Фон будет повторяться только по оси X то есть горизонтально в одну линию.

background: url(proba.png) repeat-y;

Фон будет повторяться только по оси Y то есть вертикально в одну линию.

background: url(proba.png) no-repeat;

Фон не будет повторяться, а появится лишь одно изображение.

background-size: 500px 200px;

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

Прозрачность изображения с помощью CSS

В браузере видим следующее:

Это свойство пришло с появлением CSS3 и собственно получило достаточно обширное применение.

Реализуется с помощью параметра opacity задает прозрачность изображения, значения от 0 до 1, а второй параметр filter: alpha(Opacity=50); делает тоже самое только для браузера Internet Explorier так как старые версии не поддерживают параметр opacity, значения от 0 до 100. В примере я специально сделал два изображения, чтобы наглядно было видно разницу.

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

Источник: https://for-net.ru/view_post.php?id=117

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

В этой статье поделюсь способом как масштабировать изображения в css.

Конечно-же придуман этот способ не мной — до недавнего времени я даже не знал о его существовании. Но, как писал Александр Сергеевич: «О сколько нам открытий чудных»…

Итак, как масштабировать изображения в CSS.

Читайте также:  Биткоин краны

Обычно делал таким образом: задавал в стилях ширину в процентах, а высоту выставлял авто и всё.

Например:

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

В этом случае ширина изображения займёт 100% родительского блока, а высота будет пропорционально выставлена автоматически. HTML-код выглядел примерно так:

 И это прекрасно работало и работает в большинстве случаев. Даже с расчётом на адаптивный дизайн.

Но вот на днях, завершая работу по переводу самописного корпоративного сайта на адаптивный дизайн (кстати, как оказалось — увлекательнейшее занятие!), я столкнулся с необходимостью выводить несколько изображений товаров в одну линию и таких линий-строк на целую страницу. А проблема заключалась в том, что размеры у изображений разные. Несколько тысяч картинок делались в разные годы разными дизайнерами и по разным стандартам, которые периодически менялись.

И с CSS, наподобие того, что привёл выше всё это выглядело так:

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

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

Совет

Но надо было как то выкручиваться и для десктопных устройств. И первым делом я кинулся к дизайнерам, но они подтвердили, что всё делают по стандарту, а старые картинки переделывать они физически не смогут. И без того работы выше крыши. Постепенно, когда-нибудь…

Ну не ждать же действительно пока они разгребут тысячи картинок — это просто нереально. Осознав эту очевидность, я принялся искать решение. И оно нашлось!

Вот как теперь выглядит тот же блок на странице:

Всё ровно и красиво. Изображения вписываются полностью пропорционально, как по ширине, так и по высоте…

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

Ну и коль вы уже поняли, что я имею в виду, поговорим о том, как это сделать.

Если помните, в первом случае изображение размещалось при помощи тега img внутри блока div.

Здесь же подход совершенно иной. CSS3 даёт нам прекрасную возможность использовать фоновое изображение блока.

Вот как выглядит стиль такого блока:

.tableimg {
width: 96%;
height:150px;
min-height:150px;
max-height:150px;
background: url(«../images/014065.jpg») no-repeat;
background-size: contain;
background-position: center;
}

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

background-size: contain;

Возможен ещё вариант background-size: cover; В чём разница? В случае с cover изображение будет просто обрезано по размеру блока, а contain пропорционально вписывает изображение в блок. И HTML-код такого блока будет таким:

Обратите внимание

 Это, так сказать, общий случай. На самом деле background: url я в стилях не прописывал — иначе у меня во всех блоках была бы одна и та же картинка.

Это свойство я определял уже в HTML-коде каждого блока отдельно. Примерно так:

.tableimg {
width: 96%;
height:150px;
min-height:150px;
max-height:150px;
background-size: contain;
background-position: center;
}

В моём конкретном случае картинку я вычислял программно динамически для каждого блока и вставлял при помощи PHP.

print «»;

 Это реально выдернутая строчка из кода… Но тут всё зависит от задачи.

Вот и весь способ — он меня здорово выручил. Работающий сайт, о котором я говорил, можно посмотреть вот здесь: ddwshop.com. Можно зайти в любую группу товаров и увидеть данное решение в действии.

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

Источник: https://obg.kz/kak-masshtabirovat-izobrazheniya-v-css.html

Управление размером фонового изображения при помощи css

Одним из наиболее часто используемых при верстке сайтов css-свойств является свойство фона элемента страницы (background). Сегодня мы поговорим с Вами о том, как можно изменять размеры фонового изображения при помощи CSS.

В более старой версии CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняла свои фиксированные размеры. Изменить размеры фоновой картинки было нельзя. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат.

Есть несколько способов определения размеров — взгляните на демонстрационную страницу background-size.

Абсолютное изменение размера

background-size: ширина высота;

По умолчанию ширина и высота установлены как auto, что сохраняет исходные размеры изображения.

Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:

background-size: 100px 200px;

Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:

background-size: 100px; /* аналогично */ background-size: 100px auto;

Данный код масштабирует изображение с 200×200 до 100×100 пикселов.

Относительное изменение размера через проценты

Если применяются проценты, размеры основываются на элементе, а НЕ изображении:

background-size: 50% auto;

Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.
Использование процентов может быть полезно для адаптивного дизайна.

Масштабирование до максимального размера

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

background-size: contain;

Заполнение фоном

Свойство background-size также понимает ключевое слово cover. Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.

Масштабирование нескольких фонов

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

background: url(«sheep.png») 60% 90% no-repeat, url(«sheep.png») 40% 50% no-repeat, url(«sheep.png») 10% 20% no-repeat #393;
background-size: 240px 210px, auto, 150px;

Все последние версии браузеров поддерживают свойство background-size.

Заключение

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

Не забудьте подписаться на обновления блога, чтобы не пропустить новые интересные статьи.

Источник: http://free-site-master.ru/sajtostroenie/verstka/upravlenie-razmerom-fonovogo-izobrazheniya-pri-pomoshhi-css.html

Работа с картинками (изображениями) в CSS

Ваш текст

или

Ваш текст

Повтор фоновой картинки

background-repeat

Бывают моменты, когда нам необходимо управлять повторами фонового изображения. Например, нам выгодно, чтобы повтор фонового изображения был только по горизонтали или только по вертикали,  а бывает момент, что повтор фонового изображения нам вообще не нужен. Итак, как нам выкрутиться в этой ситуации? Воспользуйтесь стилевым свойством background-repeat.

background-repeat: repeat-y | repeat-x | no-repeat;

Значения:

repeat-y — повтор фонового изображения по оси — у (вертикаль);
repeat-x — повтор фонового изображения по оси — х ( горизонталь);
no-repeat; — запретить повтор фонового изображения (изображение будет как оно есть);

Пример:

Ваш текст

или

Ваш текст

Как добавить две фоновые картинки на веб-страницу

background

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

Зададим фоновое изображение к элементам — HTML и BODY.

Пример:

Контент сайта

Результат:

Картинка по центру

Существуют несколько методов установить картинку по центру.

Примеры:

метод 1:

Контент сайта

метод 2:

Текст параграфа.

Далее по тексту параграфа.

метод 3:

Текст параграфа.

Текст параграфа. Далее по тексту параграфа.

Как в css изменить размер картинки

background-size

Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

background-size: ширина высота;

По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

background-size: 500px 200px;

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

можно так:

background-size: 200px;

а можно вот так:

background-size: 200px auto;

Пример:

текст сайта

Обтекание (выравнивание) картинки текстом

float

Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки , вот только в CSS по какой стороне будет выравнивание элементов определяет float.

float: left | right | none;

 Значение:

left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

right — выровнять картинку по правому краю, текст обтекает по левой стороне.

none — выравнивание и обтекание не задается (значение по умолчанию).

Пример:

Основы CSS

Приветствую всех читателей и случайных посетителей моего блога. Сегодня я бы хотел вам рассказать о незаменимом инструменте веб-дизайнера — CSS. CSS (Cascading Style Sheets) – это каскадные таблицы стилей, которые хранят в себе правила для группы или одиночного элемента. CSS используют для изменения внешнего вида дизайна сайта (цвет, размер текста, фон и др.).

Основы CSS

Давайте перейдем к основам CSS.CSS файл имеет расширение *.css. Часто веб-мастера присваивают CSS файлу имя style (style.css). CSS файл тесно связан с HTML. Другими словами, это можно объяснить так: CSS без HTML работать не будет. Предлагаю для общего понимания рассмотреть пример, как можно объединить HTML с CSS файлом.

Здесь я указал отступы текста от картинки

margin: 5px 0 5px 5px;

Результат:

Тень картинки

box-shadow

Небольшая тень под картинкой придает также странице эффект трехмерности, объёма и глубины. Для добавления тени используется свойство box-shadow.

Читайте также:  Как заработать на вводе каптчи

1. —  inset —  тень внутри элемента, без inset тень будет наружу; 2. — сдвиг тени по горизонтали (6px — вправо, -6px — влево); 3. — сдвиг по вертикали (6px — вниз, -6px — вверх); 4. — размытие тени (0 — четкая тень); 5. — растяжение тени (3px — растяжение, -3px — сжатие);

6. — цвет тени

box-shadow: 0 0 5px; — тень вокруг элемента

box-shadow: inset 0 0 5px; — тень внутри

Пример:

Результат:

Прозрачность картинки

Начну сразу с примера.

Пример:

Обычное изображение:

изображение с прозрачностью:

Обратите внимание в коде на opacity:0.4. Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

Результат:

С наилучшими пожеланиями Webmasterok2009

Последние новости категории:

Источник: https://bloggood.ru/css-osnovi-primer-podskazki/rabota-s-kartinkami-izobrazheniyami-v-css.html/

Изменить размер изображения пропорционально CSS?

Чтобы изменить размер изображения пропорционально с помощью CSS:

img.resize { width:540px; /* you can use % */ height: auto;
}

ответ дан Mkk 26 апр. '10 в 11:28

источник поделиться

Размер управления и пропорция поддержки:

#your-img { height: auto; width: auto; max-width: 300px; max-height: 300px;
}

ответ дан Cherif 19 марта '13 в 17:17

источник поделиться

Если это фоновое изображение, используйте background-size: contains.

Пример css:

#your-div { background: url('image.jpg') no-repeat; background-size:contain;
}

ответ дан lenooh 20 дек. '13 в 20:30

источник поделиться

Try

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

ответ дан orome 17 янв. '14 в 5:49

источник поделиться

Обратите внимание, что width:50% изменит размер до 50% доступного пространства для изображения, а max-width:50% изменит размер изображения на 50% от его естественного размера. Это очень важно учитывать при использовании этих правил для мобильного веб-дизайна, поэтому для мобильного веб-дизайна max-width всегда следует использовать.

ответ дан andreszs 29 сент. '13 в 18:07

источник поделиться

Чтобы масштабировать изображение, сохраняя его соотношение сторон

Попробуйте это,

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

ответ дан Prasanth K C 10 дек. '13 в 21:01

источник поделиться

Повторение в 2015 году:

Я пересмотрел его, так как все распространенные браузеры теперь работают автоматически, предложенные Cherif выше, так что это работает еще лучше, так как вам не нужно знать, является ли изображение шире, чем выше.

более старая версия: Если вы ограничены полем 120×100, например, вы можете сделать

ответ дан PetrV 12 янв. '12 в 20:43

источник поделиться

Вы можете использовать свойство object-fit:

.my-image { width: 100px; height: 100px; object-fit: contain;
}

Это будет соответствовать изображению, не изменяя пропорционально.

ответ дан Andrii Bogachenko 08 сент. '16 в 19:19

источник поделиться

Свойства css max-width и max-height работают отлично, но не поддерживаются IE6, и я считаю IE7. Вы хотели бы использовать это по высоте/ширине, чтобы вы случайно не масштабировали изображение. Вы просто хотели бы ограничить максимальную высоту/ширину пропорционально.

ответ дан Shawn 25 апр. '09 в 2:49

источник поделиться

работал просто отлично для меня… Или я чего-то не хватает?

Изменить: Но см. Shawn, чтобы предупредить о его непредсказуемости.

ответ дан Adrien 25 апр. '09 в 2:47

источник поделиться

Используйте эту технику простого масштабирования

img { max-width: 100%; height: auto;
}
@media { img { width: auto; /* for ie 8 */ }
}

ответ дан Geniusknight 01 июля '14 в 17:28

источник поделитьсяimg { max-width:100%;
} div { width:100px;
}

с помощью этого фрагмента вы можете сделать это более эффективным способом

ответ дан Lenin Zapata P 21 мая '13 в 8:43

источник поделиться

Вам всегда нужно что-то вроде этого

html
{ width: 100%; height: 100%;
}

в верхней части вашего файла css

ответ дан MikeStr 24 июня '14 в 11:30

источник поделитьсяimg{ max-width:100%; object-fit: scale-down;
}

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

ответ дан pheon 21 июня '17 в 22:36

источник поделиться

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

@media screen and (orientation: portrait) {
img.ri { max-width: 80%; }
}
@media screen and (orientation: landscape) { img.ri { max-height: 80%; }
}

ответ дан Moh K 23 авг. '17 в 11:22

источник поделиться

Попробуйте следующее:

div.container { max-width: 200px;//real picture size max-height: 100px;
} /* resize images */
div.container img { width: 100%; height: auto;
}

ответ дан ovod 07 марта '16 в 1:17

источник поделиться

Источник: http://qaru.site/questions/13847/resize-image-proportionally-with-css

Изображение в html (тэг img src), как задать фоновые изображения, рамки, отступы

Приветствую вас, читатели TakProstoTak.ru, сегодня будем говорить на тему изображений в html.

Как вставить изображение в код html? Как менять размер изображения? Как задать фоновое изображение для некоторых html элементов и как сделать кнопку html формы изображением? на эти и многие другие вопросы я отвечу в этой статье. По ходу пьесы разберем, как выглядит html код изображения и как сделать изображение ссылкой. Рассмотрим как наложить текст на изображение.

Вставляем изображение в текст html, меняем размер изображения

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

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

Принципиальных сложностей тут нет, вставка изображения делается при помощи html тэга IMG, а расположение в тексте регулируется CSS (CSS блочная верстка) свойствами конкретного изображения и элементами, расположенными в непосредственной близости.

Вывод изображения осуществляется тэгом IMG, при этом задействуется обязательный атрибут SRC (source или источник). Ниже представлен html код, выводящий одно изображение.

Важно

результат работы этого кода, как видно на фото позирует очаровательный представитель семейства кошачьих.

Примечание: Какие тут могут быть трудности? Можно указать неверно путь к изображению, в этом случае браузер ничего не покажет. Скорее всего, вы ошиблись в имени или неверно указали путь к изображению.

Путь может быть абсолютным и относительным. В моем случае используется абсолютный путь: http://takprostotak.ru/wp-content/uploads/2012/01/images1.jpeg. Абсолютный путь всегда начинается с http://адрес_сайта/, далее следует путь к изображению относительно корня сайта (/wp-content/uploads/2012/01/images1.jpeg). Так же абсолютный путь позволяет использовать изображения с других сайтов.

Относительный путь (/wp-content/uploads/2012/01/images1.jpeg), так же часто используется и наиболее предпочтителен, т.к. при смене доменного имени относительные пути по прежнему будут работать.

Рассмотрим основные атрибуты тэга IMG:

  • src — Источник, адрес файла-изображения
  • width — Ширина контейнера под изображение
  • height — Высота контейнера под изображение
  • hspace — отступ по горизонтали от окружающего текста
  • vspace — отступ по вертикали от окружающего текста
  • border — толщина рамки изображения
  • alt — альтернативный текст изображения. Если отключить показ картинок в браузере, то вместо картинок будет показан альтернативный текст.

Пример использования атрибутов тэга IMG:

результат (рамка 4пикс., ширина и высота 100пикс. альтернативный текст — «кот на рыбалке»):

Атрибуты width и height рекомендую всегда указывать, даже если они совпадают с истинными размерами изображения. Если эти атрибуты указаны, то браузер резервирует изначально место под изображение в html документе и не дожидаясь загрузки продолжает формировать страницу, а изображение тем временем загружается. В итоге страница быстрее загрузиться.

width и height могут отличаться как в большую так и в меньшую сторону от истинного значения изображения, в этом случае браузер уменьшит/увеличит изображение. Важно понимать, что браузер изменяет изображение не пропорционально, а как вы укажите.

Часто можно видеть, как начинающие вебмастера ставят на сайте большие картинки (200кб-2мб) и при этом уменьшают их за счет атрибутов width и height, это плохой стиль, который ведет к тому, что картинки будут выглядеть меньше, чем есть на самом деле, а ваша страница будет дольше грузиться, а пользователь, не дождавшись, уйдет и никогда не вернется.

В идеале истинное значение высоты и ширины изображение должно совпадать с атрибутами ширины и высоты тэга IMG или отличаться незначительно.

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

Рамка и отступы изображения. Выравнивание изображения

Мы уже рассмотрели пример как при помощи атрибута border задать рамку вокруг изображения, с тем же успехом можно задать рамку через CSS (CSS табличная верстка).

Давайте зададим во круг всех изображений страницы красную рамку шириной 5пикс.

В результате получим:

Все изображения на странице будут иметь аналогичную рамку поскольку в CSS используется правило img { border:5px solid red;}, которое применимо ко всем тэгам IMG.

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

В нашем же случае для наглядности html и css коды располагаются в одном файле.

Примечание: Если нужно задать стиль для конкретного изображения или группы, тогда следует использовать CSS классы. Присваиваем нужным изображениям любой класс (), а в CSS стилях задаем необходимые свойства для этого класса (.img_ramka { border:5px solid red;}).

Выравниваем изображение по левому краю.

Выравнивать изображения можно по центру, по левому или правому краям. В данном случае изображение выровнено по левому краю. Выровнить изображение можно путем указания CSS свойства float с одним из значений left|right|none|inherit. Также можно указать атрибут align для тэга IMG, значения атрибута left|right|center.

по правому краю

Этот текст обтекает изображение слева, так как в CSS стилях задано свойство для изображений float: right.

Читайте также:  Что такое троллинг

Отступы от изображения.

В приведенном выше примере текст обтекает изображение плотно, без отступов. Часто требуется, чтобы текст отступал от изображений на некоторое расстояние, прилипший текст смотрится некрасиво. Давайте зададим отступ текста от изображения в 10 пикселов.

Совет

За это отвечает CSS свойство margin. margin:10px — означает, что нужно отступить 10 пикселов со всех четырех сторон. Если нужно с каждой стороны задать разные отступы, тогда следует использовать это свойство в другой вариации (margin:2px 3px 4px 5px — задает разные отступы, сверху 2пикс., справа 3пикс., снизу 4пикс.

, слева 5пикс.).

Задаем фоновое изображение для html элемента. Делаем изображение кнопкой формы. Как наложить текст на изображение

Часто бывает необходимо использовать изображение в качестве фона для блочного html элемента. На моем сайте фон задается как абстрактная картинка, размноженная по вертикали и горизонтали.

Давайте создадим div контейнер с габаритами 200 на 200 пикселов и фоновой картинкой (иконка rss) и заключим его в черную рамку толщиной 4 пикс. Внутри контейнера div расположен текст, в результате мы решили задачу наложения текста на изображение.

Если необходимо текст может быть спозиционирован внутри контейнера как угодно и иметь любое стилевое оформление.

Контейнер DIV, может содержать произвольный текст или любой html код. В качестве фона задана картинка (32 на 32 пиксела), которая повторяется по вертикали и горизонтали.

Фоновое изображение задается CSS свойством background: url(…). Как видим фоновый рисунок повторяется и заполняет весь контейнер, это потому что рисунок меньше чем контейнер и в свойстве background не указано о «не размножении» картинки (no-repeat).

Фоновое изображение без повторений
Чтобы фон не повторялся необходимо указать параметр no-repeat свойства background.

В этом контейнере DIV фоновое изображение не повторяется (параметр no-repeat), смещено слева на 50 пикс. и сверху на 20 пикс.

Фоновое изображение повторяется по оси горизонтали
Если нужно чтобы фоновая картинка размножилась только по оси X, для этого необходимо указать параметр repeat-x свойства background.

В этом контейнере DIV фоновое изображение повторяется только по оси X (параметр repeat-x).

Фоновое изображение повторяется по оси вертикали
Если нужно чтобы фоновая картинка размножилась только по оси Y, для этого необходимо указать параметр repeat-y свойства background.

В этом контейнере DIV фоновое изображение повторяется только по оси Y (параметр repeat-y).

Делаем изображение кнопкой html формы. Кнопка-картинка
Стандартно кнопка html формы выглядит как-то так

Чтобы сделать изображение кнопкой необходимо изменить тип поля INPUT на IMAGE и добавить параметр SRC.

Как сделать изображение ссылкой. Убираем рамку вокруг изображения-ссылки в IE

Очень часто требуется сделать так чтобы по клику по изображению осуществлялся переход на некую html страницу или другими словами сделать картинку ссылкой, привязать ее к определенному URL. Для этого нужно, всего-навсего заключить изображение в тэг A. Следующая ссылка ведет на главную страницу моего блога:

код:

Здесь параметр HREF указывает адрес ссылки, а TARGET=»_BLANK» говорит о том, что страница должна открываться в новом окне браузера.

Чтобы избежать появления рамки вокруг изображения-ссылки в IE, необходимо задать в CSS стилях общее свойство (a img { border:0;}).

На последок по традиции видео в тему.

Источник: http://takprostotak.ru/vebrazrabotchiku/html-v-primerax/izobrazhenie-v-html-teg-img-src-kak-zadat-fonovye-izobrazheniya-ramki-otstupy.html

Изображения


Такие вот разные птицы.

Результат в браузере

Такие вот разные птицы.

Если отключите в своем браузере показ изображений, то увидите альтернативный текст атрибута alt.

Изменение размеров изображений в HTML

По умолчанию все браузеры показывают изображения в их натуральные размеры. Но при помощи атрибутов width и height тега можно изменить их высоту и ширину. Значения указываются в числах, которые означают размеры в пикселях (ставить в конце чисел буквы px не нужно) или процентах, в этом случае в конце надо поставить знак %.

Пример изменения размеров изображений

Результат в браузере

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

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

Это позволяет пользователям не сидеть в томительном ожидании и быстрее начать пользоваться сайтом.

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

Ребята, еще раз хочу обратить ваше внимание на то, что только в размерах атрибута style указываются единицы измерения пиксели и пункты (px, pt), а все потому, что он относится к CSS.

Обратите внимание

У всех (абсолютно всех) остальных атрибутов HTML, которые мы с вами изучили и еще изучим, пиксельный размер пишется просто цифрами, без указания единиц измерения. И только процентные размеры и там и там указываются со знаком %.

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

Выравнивание изображений

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

Вы уже сталкивались с выравниванием в уроке о Выравнивании содержимого тегов, но как вы знаете, его нельзя применять к встроенным тегам, таким, как , да и никакого эффекта это не даст. Поэтому и значения атрибута style будут совершенно другие, предназначенные для выравнивания не содержимого, а HTML-элемента целиком:

style=»float:left» — прижимает изображение к левой стороне блока, в котором находится изображение, а весь текст обтекает его справа.

style=»float:right» — прижимает изображение к правой стороне блока, а текст обтекает его слева.

Пример выравнивания изображения по левому краю.

Первый параграф.

Текст перед картинкой. После картинки.<\p>

Последний параграф.

Результат в браузере

Первый параграф.

Текст перед картинкой.После картинки.

Последний параграф.

Как видите, первый параграф-блок выравнивание не затронуло, зато весь текст второго параграфа и третьего параграфа обтекли картинку справа.

Хорошо, а если нам не надо, чтобы нижестоящие блоки обтекали изображение? В этом случае вам поможет еще одно значение атрибута style, которое вы можете применить внутри любого блочного тега.

style=»clear:left» — прерывает обтекание изображений выровненных по левой стороне.

style=»clear:right» — прерывает обтекание изображений выровненных по правой стороне.

Важно

style=»clear:both» — прерывает обтекание изображений выровненных по обеим сторонам.

Пример прерывания обтекания изображения

Первый параграф.

Текст перед картинкой. После картинки.<\p>

Последний параграф.

Результат в браузере

Первый параграф.

Текст перед картинкой.После картинки.

Последний параграф.

Создание внешних отступов у изображений

Я думаю, вы обратили внимание, что изображения всегда вплотную прижимаются к окружающим элементам. Будь в предыдущем примере не тег параграфа а, например, блок , то рисунок вообще со всех сторон было бы прижат.

Так вот, в старом HTML у тега были два атрибута, hspace и vspace, которые изменяли размер внешних полей (отступов) между изображением и окружающими элементами, но теперь их нет и неизвестно, сколько еще времени браузеры будут их поддерживать.

Поэтому вновь применяем атрибут style, общий синтаксис такой:

style=»margin:размер» — Устанавливает одинаковый размер полей для всех сторон изображения.

style=»margin:сверху справа снизу слева» — Размеры полей для каждой стороны, пишутся через пробел по часовой стрелке.

В качестве значений можете указывать известные вам единицы измерения: пункты (pt), пиксели (px), проценты (%), чаще всего применяют пиксели. Кстати, если каким-то из значений у вас является ноль (0), то единицы измерения можно не ставить, а можно и ставить — в данном случае без разницы.

Пример изменения полей вокруг изображений

Текст перед картинкой. После картинки.<\p>

Результат в браузере

Текст перед картинкой.После картинки.

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

title=»Любой текст.»

Примера не будет, так как тут все элементарно. Главное не путайте title и alt. Содержимое alt отображается, если в браузере отключен показ картинок и, в отличие от title, он является обязательным атрибутом.

Совет

Иногда у меня возникает чувство, что я пишу учебник по CSS, а не по HTML — так часто мы используем style. Но что делать, если столько тегов или их атрибутов стали устаревшими в современном HTML. Ну вам-то это только на пользу — не будете, как я, переучиваться.

Домашнее задание.

  1. В папке, где находится ваша страничка, создайте подпапку с названием image и пусть все ваши рабочие изображения хранятся там.
  2. Создайте первый параграф и укажите там одно изображение, но три раза: в натуральный размер, в два раза больше, увеличьте только ширину.
  3. Во втором параграфе сделайте рисунок среди текста, пусть его боковые поля будут по 30px и имеется всплывающая подсказка.
  4. Ниже создайте изображение и пусть его левое и нижнее поля будут равны 20px
  5. Еще ниже напишите два параграфа и сделайте так, чтобы текст первого обтекал указанное выше изображение слева.
  6. В конце сделайте так, чтобы один из рисунков примеров данного урока загрузился на вашу страницу прямо с сайта Сеодон. Как? Подумайте.
Якоря — создаем закладки ← Содержание → Изображения для фонов

Источник: http://seodon.ru/html/images.php

Ссылка на основную публикацию