Как поменять размер картинки в css
Перейти к содержимому

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

  • автор:

Размер картинки через background в CSS

Чтобы задать или изменить размер изображения background нужно просто воспользоваться родственным CSS-свойством background-size. Значениями могут выступать: contain, cover, проценты и пиксели. Примеры:

background-size: contain; background-size: cover; background-size: 50%; background-size: 40px;

Использовать можно только какое-то одно значение.

Значение contain будет стараться полностью уместить картинку внутрь HTML-элемента. Значение cover постарается покрыть картинкой как можно большую часть HTML-элемента. Проценты и пиксели позволяют задать точно необходимые размеры.

Добавить комментарий Отменить ответ

Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK

Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.

Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

Cookie Duration Description
cookielawinfo-checkbox-analytics 11 months This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics».
cookielawinfo-checkbox-functional 11 months The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional».
cookielawinfo-checkbox-necessary 11 months This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary».
cookielawinfo-checkbox-others 11 months This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other.
cookielawinfo-checkbox-performance 11 months This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance».
viewed_cookie_policy 11 months The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

object — fit

Подстраиваем картинку или видео под контейнер без деформации.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 8 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

По своему поведению очень похоже на свойство background — size для фоновых изображений.

Пример

Скопировать ссылку «Пример» Скопировано

Представим, что у нас есть картинка размером 500 на 150 пикселей:

   src="https://doka.guide/css/object-fit/images/landscape.jpg" alt="Картинка из примера про object-fit"> img class="image" src="images/landscape.jpg" alt="Картинка из примера про object-fit" >      

По дизайну картинка должна занимать 250 на 250 пикселей. Если мы просто зададим эти размеры, то картинка сильно деформируется.

 .parent  width: 250px; height: 250px; border: 1px solid #FFFFFF; /* Для наглядности */> .parent  width: 250px; height: 250px; border: 1px solid #FFFFFF; /* Для наглядности */ >      

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

 .image  object-fit: cover;> .image  object-fit: cover; >      

Картинка не деформировалась, подстроилась под нужные размеры. Другой вопрос, что на ней теперь почти ничего не видно ��, но это мелочи.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Свойство задаётся для самого тега , не для родителя. Пишем свойство, а в качестве значения задаём одно из ключевых слов. В отличие от background — size мы не можем задать конкретные размеры в качестве значения ��

  • fill — значение по умолчанию, картинка полностью вписывается в указанные размеры без соблюдения собственных пропорций. Часто это приводит к ощутимым деформациям.
  • contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций.
  • cover — картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное.
  • none — картинка отображается без изменения пропорций или размеров.
  • scale — down — браузер сравнивает размеры картинки со значением none и со значением contain и выбирает одно из этих значений, деформируя картинку соответствующим образом. Сложно объяснить, посмотрите демку ��

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

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Задавайте свойство самой картинке , не родительскому контейнеру.

�� Работает только если картинке задан хотя бы один размер: ширина или высота. Иначе браузер не понимает в какую область нужно вписать картинку.

�� Свойство и его значение не наследуется. Хотя я бы посмотрела на то, как вы вложите что-нибудь внутрь картинки 0_о

�� Классно работает в сочетании со свойством object — position .

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

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

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

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

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

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

width : 200px ;
height : 160px ;
border : 2px solid red ;

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

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

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

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

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

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

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

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

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

max — width : 100 % ;
height : auto ;
display : block ;

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

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

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

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

Курсы javascript

Приветствую, коллеги!
Пытаюсь настроить под себя шаблоны толкового конструктора.
И столкнулся с проблемой, которую сам решить не могу.

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

Доступа к исходному коду страницы НЕТУ, но есть возможность внедрять кастомный CSS / жаваскрипт средствами конструктора.

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

Есть единственный аттрибут, который удовлетворяет параметрам уникальности и неизменности — но он, собака, не явдяется ни классом, ни ID — а следовательно, насколько я понимаю, не может быть использован для описания элемента в CSS. Кроме того, этот аттрибут присваивается не самой картинке, а родительскому DIV. Вот это единственный аттрибут: data-slide-url=»gallery-description» — и зацепиться можно только за него.

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

11.04.2016, 12:13
Регистрация: 27.11.2015
Сообщений: 2,899

 

11.04.2016, 20:40
Интересующийся
Регистрация: 11.04.2016
Сообщений: 13

Dilettante_Pro, спасибо огромное!

Ларчик просто открывался

Но — уточняющий вопрос. Я забыл упомянуть важный момент: размеры указываются не единовременно, а в зависимости от размера экрана. Виноват, упустил из виду, что это может быть важно.

Я пользуюсь констркуцией типа

@media only screen and (max-height:XXXpx)>

Допустимо ли внедрение такой конструкции в код в таком формате? И.е. понятно, линк на скрипт уходит в шапку, а инструкции по размерам (вторая часть) — в такую конструкцию в кастомном CSS?

ДОБАВЛЕНО:
ну в CSS оно ожидаемо не исполняется, а внедрение кода в header не работает — потому что, видимо, код должен размещаться после искомого тэга, чтобы ему было чего обрабатывать, так?

Попробовал собрать конструкцию для внедрения в footer (это возможно):

  

Говорит, ошибка в скрипте.
Последний раз редактировалось Krakozavr, 12.04.2016 в 00:37 .
11.04.2016, 21:29
без статуса
Регистрация: 25.05.2012
Сообщений: 8,219
Может тады удобней картинку ставить ставить резиновой, к примеру с width=»33%»
12.04.2016, 00:34
Интересующийся
Регистрация: 11.04.2016
Сообщений: 13

Чтобы было понятнее, чего добиваюсь (а то может я думаю совсем в неверном направлении):
вот ссылка на применение.
https://alex-potemkin.squarespace.com/

сайт на триале, надо нажать кнопку и ввести код для входа, уж простите

Собственно, субъект масшитабирования — белая подложка под описанием.

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

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

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

P.S. Сам я ниразу не кодер, фотограф я кой-чего по HTML/CSS знаю, но весьма поверхностно. А со скриптами дружбы нету вовсе.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *