Как вставить изображение в HTML

Атрибут «alt».

При отображении веб-документа прежде всего загружается текстовая часть, а затем — более ёмкие графические файлы. При медленном Интернете вы можете заметить как в окне браузера вместо этих файлов сначала появляются прямоугольные области, зарезервированные под рисунки. Img является строчным элементом. По умолчанию изображение будет выводиться в общем потоке как одна большая буква в том месте, где встретится элемент img. Как правило, первоначальные изображения представляются в виде небольшой пиктограммы в виде прямоугольника. Уже на этом этапе можно дать знать пользователю, загрузку какого изображения он ожидает. Это очень полезно для пользователей текстовых браузеров или для тех, у кого отключено воспроизведение графики. Для отображения такого поясняющего текста служит атрибут alt. Он позволяет добавить альтернативный текст, который будет отображаться вместо изображения, если по каким-либо причинам графический файл загрузить не удалось. Кроме того, атрибут alt используется поисковыми системами для поиска по содержимому альтернативному тексту картинок в Интернете.

	Даже если вам нечего сказать об загружаемом изображении, атрибут alt все равно нужно указывать, присваивая ему пустое значение: alt=»». Иначе валидатор обнаружит изображение без атрибута alt и сообщит об ошибке.

В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Теоретически, если рисунок не может быть найден, вместо него выводится значение атрибута alt:

Графический редактор Paint

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

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

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

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

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

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

Ну вот теперь вы знаете, как вставить картинку в картинку на компьютере. Мы надеемся, вам статья понравилась и стала полезной. Приятного вам времяпровождения играя со своими фотографиями!

Spread the love

Как вставить картинку в картинку на компьютере онлайн

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

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

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

Форматы графических изображений.

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

1. Формат JPEG (Joint Photographic Experts Group). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными.  Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.

2. Формат GIF (Graphics Interchange Format). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.

3. Формат PNG (Portable Network Graphics). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.

При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:

• JPEG лучше всего использовать для хранения фотографий или полутоновых картинок не содержащих текста;
• GIF используется в основном для анимации;
• PNG — формат для всего остального (иконки, кнопки и др.).

Как вставить картинку в HTML: РАЗМЕЩЕНИЕ ИЗОБРАЖЕНИЙ НА САЙТЕ

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

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

При создании крупного сайта вы также можете добавить в папку images несколько подпапок. Например, такие изображения, как логотипы и кнопки, можно хранить в подпапке interface, фотографии товаров — в подпапке products, а изображения, связанные с новостями сайта, — в подпапке news.

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

Вставляем видео и аудио с помощью HTML 5

В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.

Для вставки аудио HTML5 предоставляет парный тег AUDIO. Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:

Тег «audio» создает на странице блочный элемент. По умолчанию браузер не будет воспроизводит аудиоролик. Что бы он это сделал, в теге audio необходимо указать особый атрибут  autoplay. Особый, потому что он не имеет значения. Достаточно одного присутствия этого атрибута в теге, чтобы он начал действовать.

По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге «audio» поставить атрибут без значения controls, браузер выведет в том месте веб-страницы, где проставлен тег audio, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:

Для вставки видеоролика на веб-страницу предназначен парный тег video.  С этим тегом все тоже самое, что и с тегом audio — адрес видеофайла указывается с помощью атрибута src, а с помощью атрибутов autoplay и controls можно запустить автовоспроизведение ролика и вывести элементы управления воспроизведения видеоролика.

Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?» я вам ответил. поэтому просто подведу итоги :

• для вставки изображений на html страницу пользуемся одиночным тегом img и указываем адрес файла с картинкой в атрибуте src;
• с помощью атрибута alt тега img можно задавать текст замены на случай если изображение не загрузится;
• с помощью атрибутов width и height можно задавать размеры изображения на веб-странице;
• для вставки аудио и видео в html5 есть парные теги audio и video соответственно.

HTML и атрибут Alt

Атрибут Alt полезно указать альтернативный текст ( альтернативный текст ), этот текст не отображается , за исключением некоторых случаев:

• Когда изображение не может быть загружено;
• Иногда во время загрузки изображения;
• В текстовых браузерах (таких как lynx ), которые не показывают изображения;
• В устройствах для слабовидящих (скрин-ридер).

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

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

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

Инструкция

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

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

В качестве второго изображения возьму фото Джека с мячиком.

Далее, откроем изображение №1 в фотошопе и выделим нужную область, то есть обведём по контуру белый прямоугольник. Сделать это удобнее при помощи инструмента «Прямолинейное лассо», которое вызывается из панели инструментов слева.

Выбираем «Прямолинейное лассо» и аккуратно очерчиваем контур, то есть выделяем необходимую нам область. Эту же операцию можно выполнить и при помощи инструмента «Волшебная палочка».

Теперь откроем в Photoshop изображение №2 и полностью выделим, нажав сочетание клавиш «Ctrl+A». Вы увидите пунктирное выделение картинки в активном окне. Теперь просто скопируем картинку в буфер обмена, нажав «Ctrl» и «C».

Далее вставим картинку №2 в фоновое изображение №1. Но сочетание клавиш «Ctrl+V» в этом случае не сработает. В Photoshop есть для этого функция «Специальная вставка», которая вызывается из пункта «Редактирование» верхнего меню.

Итак, чтобы внедрить картинку №2 в выделенную область картинки №1, перейдите в окно с изображением №1 и клацнете на пункт меню «Редактирование». Далее в выпавшем списке наведите курсор на строку «Специальная вставка» — появится ещё одно подменю, где щёлкнете по строке «Вставить в». Либо, вместо вызова из меню, нажмите сочетание «горячих» клавиш «Alt+Shift+Ctrl+V».

Обратите внимание на панель слоёв (у меня она находится справа). Над слоем фонового изображения (Слой 0) появился ещё один слой (Слой 1) с картинкой №2 и миниатюрой слоя-маски

Белый прямоугольник миниатюры слоя-маски — это и есть область выделения в картинке №1, которую мы ранее создали.

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

Встав на Слой 1 и выбрав инструмент «Перемещение», мы можем двигать картинку №2 как нам угодно и она не будет перекрывать цветную рамку. Всё перемещение будет происходит внутри слоя-маски.

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

HTML-тег

Тег <img> является основным элементом для вставки изображения в HTML-страницу. Минимальный синтаксис выглядит следующим образом:

<img src="https://gospodaretsva.com/Image.png" alt="изображение">

Сначала отметим, что тег — это тег без содержимого, поэтому у него нет закрывающего элемента </ img> . Давайте рассмотрим значение ключевых слов и основных атрибутов:

ключевое слово	описание
IMG	Имя тега, сокращение от image (image)
src	Это означает источник , это адрес (URL) файла, который мы хотим показать
alt	Это альтернативный текст , который появляется, если по какой-то причине клиент не показывает изображение. Мы также можем опустить этот атрибут, но он полезен для доступности и для поисковых систем

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

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

<p>Привет.</p> <img src="logo_html.png"> <p>это логотип</p> 

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

Как вставить картинку в текст в Word

Открываем приложение Microsoft Word  для написания текста. Чтобы вставить картинку в текст, надо на панели инструментов нажать на вкладку «Вставка». А затем нажать на вкладку «Рисунок».

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

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

А можем перейти на вкладку «Работа с рисунками. Формат».

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

Картинку можно обрезать по краям. Нажимаем на картинку, затем на вкладку «Формат», затем на «Обрезка». Вокруг картинки появится рамка с маркерами. Двигая эти маркеры, мы выполняем обрезку ненужных фрагментов картинки. После обрезки сохраняем результат. Щелкаем по чистому полю листа за пределами картинки.

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

Обрезка по фигуре позволяет выбрать не только плоские форматы, но и объемные. Например, вот такой.

Маленькая картинка будет не очень хорошо смотреться на большом листе с текстом. Поэтому лучше выбрать более выигрышный вариант расположения картинки. На вкладке «Положение» представлено несколько вариантов обтекания картинки текстом. Ее можно переместить в любое место на странице с текстом. Нажимаем на выбранный вариант и перемещаем картинку.

Вкладка «Экспресс-стили» позволяет выбрать стиль оформления картинки. Это могут быть тени, рамки, отражение, поворот картинки.

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

Применить эффекты для рисунка. Сделать их объемными, светящимися, с наклоном или тенью. Есть эффекты сглаживания и отражения.

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

Дополнительные атрибуты

Размещаемому изображению можно придать дополнительные атрибуты:

• alt — информирует поисковые системы о находящемся на странице рисунке и его названии, которое раскрывает ключевые слова (alt=»Король Лев»);
• title — сообщает гостям сайта о находящемся img и его названии, которое содержит ключевики (title=»Король Лев»);
• align – позволяет выравнивать изображение (например: align=»center» – выравнивание по центру).

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

Теперь перед его началом понадобится указать:

Итак, как видите, тег ссылки открывается перед кодом img и после закрывается, о чем символизирует вот такой вид тега: <a href…</a>.

Что касается его открытия. Атрибут href задается для указания пути ссылки, а после него вы видите в двойных кавычках ссылку на определенную страницу. То есть, при клике на картинку, человек перейдет на определенную страницу, а если вы хотите, чтобы эта ссылка открылась в новом окне, то прописать следует вот такой атрибут: target=»_blank».

До новых встреч.

Также советую прочесть следующие интересные статьи:

1. Что такое структура веб сайта и для чего она нужна?

2. Что такое НЧ СЧ ВЧ запросы?

3. Как выставить права доступа 777 на файл или папку?

P/S

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

Атрибуты «width» и «height»

Вы уже знаете, что браузер загружает изображения после того, как загрузит HTML-документ и начнет отображать веб-страницу. И если вы отдельно не укажете размеры изображения, то браузер не будет их знать до тех пор, пока не загрузит рисунок. В этом случае вместо изображения сначала отображается квадратик, а после загрузки графического файла происходит обновление страницы с соответствующим перемещением текста, других объектов страницы и потерей времени. Если же размеры заданы, то браузер оставляет место для изображения и страница загружается быстрее. Вы также можете указать значения атрибутов width и height, которые меньше или больше, чем фактические размеры изображения, и браузер установит пропорции рисунка так, чтобы они соответствовали новым размерам.
Их значения можно указывать в пикселах или процентах от размера окна (в этом случае после размера ставится знак %). Если после числовых значений атрибутов размерность не указана явно то, по-умолчанию, браузер интерпретирует эти величины в пикселях.

Пример: использования атрибутов width и height

• Результат
• HTML-код
• Попробуй сам »

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

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

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

Рамка вокруг рисунка в HTML

Вообще этим пользуются редко, но иногда всё-же необходимо сделать рамку
вокруг рисунка. Для этого можно использовать атрибут . Делается это примерно так:

Здесь мы обводим рисунок рамкой шириной 5 пикселей. По умолчанию цвет рамки будет чёрным. К сожалению, я не знаю простых способов изменить цвет рамки только средствами HTML, а в CSS и прочие прелести я погружаться не буду, так как мой рассказ про HTML.

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

Как вставить картинку в HTML: ТРИ ПРАВИЛА СОЗДАНИЯ ИЗОБРАЖЕНИИ

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

1. СОХРАНЯЙТЕ ИЗОБРАЖЕНИЯ В ПРАВИЛЬНОМ ФОРМАТЕ.

В основном на сайтах используется графика трех файловых форматов: JPEG, GIF и PNG. При использовании других форматов изображение может потерять резкость, замедлить скорость загрузки страницы или вовсе не отобразиться на компьютере посетителя.

1. СОХРАНЯЙТЕ ИЗОБРАЖЕНИЯ С ПРАВИЛЬНЫМИ ЗНАЧЕНИЯМИ ШИРИНЫ И ВЫСОТЫ.

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

1. ИСПОЛЬЗУЙТЕ ПРАВИЛЬНОЕ РАЗРЕШЕНИЕ.

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

Атрибут alt — как запасной вариант

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

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

И примерно так это выглядит:

Для тех, кто хочет знать лучше

При помощи css вы можете растянуть background image, сделать так, чтобы оно не повторялось, добавить gif-анимацию и многое другое.

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

Хотите научиться правильно писать сайты? Я рекомендую вам изучать языки программирования по другой программе. Могу посоветовать курс Андрея Бернацкого «HTML5 и CSS3 с Нуля до Профи». Мне очень нравится этот автор. Я не проходил конкретно этот курс, несколько лет назад было уже что-то аналогичное, но менее современное.

Кстати, вместе с этим курсом вы получаете 7 бонусов: основы html и css Андрея Бернацкого, верстка для начинающих, создание лендинг пейдж за вечер и многое другое. Перед тем как заниматься серьёзным обучением, пощупайте бесплатный курс «Практика HTML5 и CSS3».

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

Способ 0: 100% width/height

Первый способ заключается в использовании значения 100% для одного из параметров тега img – ширины или высоты. При этом второй параметр должен быть установлен в auto для сохранения пропорций изображения. Картинка растянется до размера контейнера по одному из измерений, а второе значение будет рассчитано автоматически. В результате по краям картинки могут образоваться поля, но она поместится в отведённой области целиком, без обрезки.

<html>
  <head>
    <style>
      .wrapper {
        width: 300px;
        height: 300px;
        border: 5px solid #515151;
      }
      .exmpl {
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .exmpl img {
        height: 100%;
        width: auto;
      }
    </style>
  </head>

  <body>
    <div class="wrapper exmpl">
      <img src="/images/braineater.png">
    </div>
  </body>
</html>

Так как при высоте 100% от высоты контейнера изображение вылезает за пределы этого контейнера по ширине, для обрезки лишнего используется свойство overflow со значением hidden. При этом, если мы хотим, чтобы в видимую область попала центральная часть изображения, его надо выровнять по центру контейнера. Проще всего это сделать задав контейнеру display: flex, и далее позиционировать изображение по вертикали и горизонтали с помощью свойств justify-content и align-items.

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

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

Важно: если вы используете выравнивание с помощью flex-контейнера, добавьте flex-shrink: 0, чтобы запретить автоматическое масштабирование изображения.
 

<style>
  .wrapper {
    width: 300px;
    height: 300px;
    border: 5px solid #515151;
  }
  .exmpl {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .exmpl img {
    min-width: 100%;
    min-height: 100%;
    flex-shrink: 0;
  }
</style>

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

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

<style>
  .wrapper {
    width: 300px;
    height: 300px;
    border: 5px solid #515151;
  }
  .exmpl {
    overflow: hidden;
  }
  .exmpl img {
    width: auto;
    height: 200%;
    margin: -60px 0 0 -240px;
  }
</style>

Распространённые ошибки

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

Ещё хуже – когда огромную (в пикселях) картинку пытаются уменьшить атрибутами width и height. «Вес» изображения в килобайтах (или мегабайтах?) – остается прежним и она очень долго может грузиться.

Все изменения физических размеров картинки проводятся в Adobe Photoshop, например. И значения width и height в HTML документе должны совпадать с её реальным размером в пикселях.

Не используйте в ALT тексте двойные кавычки и знаки препинания и не пишите слишком длинно.