Как изменить размер картинки через CSS?
Создаю копию данного сайта https://codepen.io/freeCodeCamp/full/RKRbwL . Хочу разместить картинку ниже в левом верхнем углу, как показано на сайте, с сохранением соотношении сторон. Параметры width и height не имеют эффекта в разделе class или img. Как можно сделать? Спасибо большое. HTML
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * < margin: 0; padding: 0; >body < background-color:#eee; font-family: 'Lato'; color: #000000; >.container < height: 100%; width:95%; margin: 0 auto; >.container .logo < width:50%; >.container .logo. img
Отслеживать
задан 26 авг 2019 в 11:27
5 1 1 золотой знак 1 1 серебряный знак 2 2 бронзовых знака
На картинке должен быть класс. Пишите ‘Имя класса’
26 авг 2019 в 11:41
то есть используйте !important
26 авг 2019 в 11:41
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Если какой то атрибут не работает значит в коде есть атрибут ‘важнее’ его. Что значит важнее? Например если писать width и в теге и в css то будет работать то что в теге потому что он считается ‘более важный’. Чтобы изменить этот порядок и заставить программу читать именно этот атрибут используйте !important . Если около атрибута написана !important он считается главным и выполняется именно он.
Отслеживать
ответ дан 26 авг 2019 в 11:53
2,741 2 2 золотых знака 13 13 серебряных знаков 28 28 бронзовых знаков
Так плохо всё написано 🙁 если писать width и в теге — это называется inline-стиль. Вы по какой-то причине не упомянули про каскадность css. Вот ссылочка с полезной инфой, особенно начинающим. Просто часто замечаю что верстают и пользуются инлайном или id селекторами и вот этими вот !important.
26 авг 2019 в 12:02
@Nilsan Я не профи по css поэтому если вы можете объяснить лучше вы можете сделать собственный ответ. И я не обижусь если он примет ваш ответ а не мой. 🙂
26 авг 2019 в 12:39
Мне кажется будет лучше если просто немного перефразируете свой 🙂 П.С. Я просто в суть вопроса не вникал если честно то просто увидел ваш ответ и вот 🙂
Как в CSS уменьшить картинку: лучшие способы и советы
В CSS есть несколько способов уменьшить картинку. Рассмотрим каждый из них с примерами кода.
1. С помощью свойства width:
Мы можем задать значение свойства width меньше, чем исходная ширина картинки. Это приведет к уменьшению картинки пропорционально исходной ширине.
css img < width: 200px; /* задаем желаемую ширину картинки */ >2. С помощью свойства height:
Аналогично предыдущему способу, мы можем задать значение свойства height меньше, чем исходная высота картинки. Это приведет к уменьшению картинки пропорционально исходной высоте.
css img < height: 150px; /* задаем желаемую высоту картинки */ >3. С помощью свойства transform:
Свойство transform позволяет применить различные трансформации к элементу, включая изменение масштаба. Мы можем использовать значение scale для уменьшения размера картинки.
css img < transform: scale(0.8); /* уменьшаем картинку до 80% от исходного размера */ >4. С помощью свойства background-size:
Если картинка устанавливается как фон элемента через свойство background-image, мы можем использовать свойство background-size для изменения размера фона.
css div < background-image: url('image.jpg'); /* указываем URL картинки */ background-size: 50%; /* уменьшаем размер фона до 50% от исходного размера */ >5. С помощью свойства max-width:
Если мы не хотим изменять пропорции картинки, но ограничить ее размеры, мы можем использовать свойство max-width. Значение свойства max-width задает максимальную ширину картинки, и если она превышает эту ширину, она будет уменьшена до нее.
css img < max-width: 300px; /* задаем максимальную ширину картинки */ >Это лишь некоторые из способов уменьшить картинку в CSS. Выбор метода зависит от конкретных требований и особенностей разрабатываемого проекта.
Изменение размеров в CSS
В предыдущих уроках вы познакомились с некоторыми способами изменения размеров элементов на веб-странице с помощью CSS. Понимание того, насколько велики будут различные элементы в вашем дизайне — важно, и в этом уроке мы подведем итог по различным способам задания размеров элементов с помощью CSS и расскажем о некоторых терминах, связанных с размерами, которые помогут вам в будущем.
| Необходимые условия: | Базовая компьютерная грамотность, Установка базового ПО, базовые знания работы с файлами, основы HTML (Введение в HTML), и общее представление о том, как работает CSS (Введение в CSS.) |
|---|---|
| Цель: | Изучить различные способы задания размеров объектов в CSS. |
Размер по умолчанию или внутренний размер
Элементы HTML имеют размеры по умолчанию, заданные до того, как на них повлияет какое-либо правило CSS. Простой пример — изображение. Изображение имеет ширину и высоту, определенные в файле изображения. Этот размер называется — внутренний размер, он исходит из самого изображения.
Если вы разместите изображение на странице и не измените его высоту и ширину, используя атрибуты тега или CSS, оно будет отображаться с использованием этого внутреннего размера. В примере ниже, мы установили для изображения рамку, чтобы вы могли видеть размер файла.
В приведенном выше примере попробуйте добавить текст внутри пустого элемента. Этот текст теперь становится охваченным границами, потому что высота элемента определяется содержимым. Следовательно, размер этого устанавливается размером содержимого. Как и в предыдущем примере, этот размер является внутренним размером — размер элемента определяется размером его содержимого.
Присваивание определенного размера
Конечно, мы можем задать элементам нашей страницы определенный размер. Размер, который присваивается элементу (содержимое, которого затем должно соответствовать этому размеру), называется внешним размером. Возьмите наш из примера выше и установите ему специальные значения width и height и теперь он будет иметь эти размеры, независимо от того, какого размера содержимое в него помещается. Как мы узнали в нашем предыдущем уроке о переполнении, заданная высота блока может вызвать переполнение содержимого, если размер содержимого больше, чем внутреннее пространство элемента.
Из-за этой проблемы перекрытия, жестко задавать высоту элементов с помощью длины или процентного соотношения — это то, что нужно делать с большой осторожностью.
Использование процентного соотношения
Во многих отношениях проценты действуют как единицы длины, и, как мы обсуждали в уроке, посвященном значениям и единицам, они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, от чего этот процент рассчитывается. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера.
Это потому, что проценты рассчитываются в зависимости от размера содержащего элемент блока. Если процентное соотношение не применяется, наш будет занимать 100% доступного пространства, так как это элемент блочного типа. Если мы зададим ему ширину в процентах, он займет процент от пространства, которое он обычно заполняет.
Margins и paddings в процентах
Если вы установите margins и padding в процентах, вы можете заметить странное поведение. В приведенном ниже примере у нас есть блок. Мы присвоили внутреннему блоку margin 10% и padding 10%. Padding и margin сверху и снизу имеют тот же размер, что и margins слева и справа.
Например, вы можете ожидать, что процентное значение верхнего и нижнего margins будет в процентах от высоты элемента, а процентное левое и правое margins — в процентах от ширины элемента. Тем не менее, это не так!
При использовании margins и padding, заданных в процентах, значение рассчитывается на основе inline размера блока — следовательно, ширины при работе с горизонтальным языком. В нашем примере все поля и отступы составляют 10% width. Это означает, что вы будете иметь margins и padding одинакового размера по всему полю. Этот факт стоит запомнить, если вы действительно пользуетесь процентами.
Минимальные и максимальные размеры
Помимо возможности установить фиксированный размер, мы можем использовать CSS чтобы задать элементу минимальный или максимальный размер. Если у вас есть блок, который может содержать разное количество содержимого, и вы хотите, чтобы он всегда был определенной минимальной высоты, вы можете установить для него свойство min-height . Блок всегда будет минимальной заданной высоты, пока содержимого не станет больше, чем места в блоке.
В приведенном ниже примере вы можете увидеть два блока, обоим задали минимальную высоту в 150 пикселей. Блок слева имеет высоту 150 пикселей несмотря на то что в нем нет текста. В блоке справа есть контент, которому нужно больше места, чем минимальная заданная высота, поэтому он увеличился.
Это очень полезно при работе с переменным объемом контента, избегая при этом переполнения.
Часто max-width применяют для уменьшения масштаба изображений, если недостаточно места для их отображения.
Например, если бы вы установили width: 100% для изображения, а его внутренняя ширина была меньше, чем его контейнер, изображение было бы вынуждено растягиваться и становиться больше, в результате чего оно выглядело бы пикселизированным.
Если бы вы вместо этого применили max-width: 100% , и внутренняя ширина изображения была бы меньше, чем его контейнер, изображение не будет принудительно растягиваться и становиться больше, что предотвращает пикселизацию.
В приведенном ниже примере мы использовали одно и то же изображение трижды. Первому изображению было задано width: 100% и оно находится в контейнере, который больше его ширины, поэтому он растягивается до ширины контейнера. Второму изображению задано max-width: 100% , изображение достигло 100% своей ширины не растягивается, чтобы заполнить контейнер. Третье поле снова содержит то же изображение, также с max-width: 100% в этом случае вы можете увидеть, как он уменьшилось, чтобы поместиться в контейнер.
Этот метод используется для создания отзывчивых изображений, чтобы при просмотре на меньшем устройстве они соответствующим образом уменьшались. Однако вам не следует использовать эту технику для загрузки действительно больших изображений с последующим их уменьшением в браузере. Изображения должны иметь соответствующий размер, чтобы быть не больше, чем они должны быть для самого большого размера, отображаемого в дизайне. Загрузка слишком больших изображений замедлит работу вашего сайта и может стоить пользователям больше денег, если они используют лимитированное соединение.
Единицы вьюпорта
Вьюпо́рт — это видимая область вашей страницы в браузере, который вы используете для просмотра сайта. В CSS у нас есть единицы измерения, которые относятся к размеру вьюпорта — vw единицы ширины вьюпорта и vh высоты вьюпорта. Используя эти единицы измерения, вы можете изменять размер чего-либо относительно вьюпорта пользователя.
1vh равен 1% от высоты вьюпорта и 1vw равен 1% ширины вьюпорта. Вы можете использовать эти единицы измерения для размеров блоков, а также текста. В приведенном ниже примере у нас есть блок размером 20vh и 20vw. В блоке есть буква A , которой присвоено значение font-size 10vh.
Если вы измените величину vh и vw — это изменит размер блока или шрифт; изменение размера вьюпорта также изменит их размеры, поскольку они имеют размер заданный относительно вьюпорта. Чтобы увидеть изменение примера при изменении размера вьюпорта, вам нужно будет загрузить пример в новое окно браузера, размер которого можно изменить (поскольку встроенное приложение , содержащее показанный выше пример, является его окном просмотра). Откройте пример, измените размер окна браузера и посмотрите, что происходит с размером поля и текста.
Размеры объектов задаваемые в соответствии с вьюпортом могут быть полезны в ваших проектах. Например, если вы хотите, чтобы основная секция отображалась перед остальным контентом, установите для этой части страницы высоту 100vh, это приведет к выталкиванию остального контента ниже видимой области, что означает, что он появится только после того, как страницу прокрутят вниз.
Проверьте свои навыки!
В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — см. Проверка своих навыков: задание размеров (en-US) .
Заключение
Этот урок дал вам краткое изложение некоторых ключевых проблем, с которыми вы можете столкнуться при определении размеров объектов в Интернете. Когда вы перейдете к CSS раскладке, изменение размеров станет очень важным для освоения различных методов раскладки, поэтому перед тем, как двигаться дальше, стоит разобраться в концепциях.
В этом модуле
- Каскад и наследование
- Селекторы CSS
- Селекторы типа, класса и ID
- Селекторы атрибута
- Псевдоклассы и псевдоэлементы
- Комбинаторы
- Блочная модель(The box model)
- Фон и границы
- Обработка разных направлений текста
- Переполнение содержимого
- Значения и единицы измерения
- Размеры в CSS
- Элементы изображений, форм и медиа-элементы
- Стилизация таблиц
- Отладка CSS
- Организация вашей CSS (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Элементы изображений, медиа и форм
В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать.
| Prerequisites: | Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.) |
|---|---|
| Objective: | To understand the way that some elements behave unusually when styled with CSS. |
Замещаемые элементы
Изображения и видео описываются как Замещаемые элементы. Это значит, что CSS не может влиять на внутреннюю планировку этих элементов — только на их позицию на странице среди других элементов. Однако, как мы увидим, существуют различные вещи, которые CSS может сделать с изображением.
Конкретные замещаемые элементы, такие как изображения и видео, можно также описать, как элементы имеющие соотношение сторон. Это значит, что такой элемент имеет размер как по горизонтали (x) так и по вертикали (y) и будет отображаться используя «родные» размеры файла по умолчанию.
Размер изображений (калибровка)
Как вы уже знаете из этих уроков, всё в CSS генерирует блоки. Если вы поместите файл изображения внутрь блока, который больше или меньше исходного размера файла изображения в обоих направлениях, то он отобразиться либо в меньшем размере чем блок, либо перекроет его. Вам нужно принять решение с тем, что произойдёт с перекрытием.
В примере ниже у нас два блока, оба имеют размер по 200px:
- Один содержит изображение, которое 200px — оно меньше, чем блок и не растягивается что бы заполнить его.
- Второй больше 200px и перекрывает блок.
Так что же мы можем сделать с проблемой перекрывания?
Как мы учили в нашем предыдущем уроке, распространённая техника — это сделать max-width изображения — 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как или (en-US) .
Попробуйте добавить max-width: 100% к элементу в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.
Вы можете сделать другие варианты изображений внутри контейнеров. Например, вы можете захотеть дать изображению такие размеры, чтоб оно полностью покрывало блок.
Здесь вам может помочь свойство object-fit . Используя object-fit , можно определять размеры замещаемого элемента для заполнения блока различными способами.
Ниже мы использовали значение cover , которое уменьшает изображение, сохраняя соотношение сторон так, что он аккуратно заполняет блок. Поскольку соотношения сторон сохраняются, некоторые части изображения будут обрезаны блоком.
Если мы используем contain в качестве значения, изображение будет уменьшаться до тех пор, пока не станет достаточно маленьким чтобы заполнить блок. Это приведёт к «почтовой упаковке», если оно не будет иметь такого же соотношения сторон, как блок.
Вы также можете попробовать значение fill , которое будет заполнять блок, но при этом не сохранять соотношение сторон.
Замещаемые элементы в вёрстке
При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.
Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.
Если вы изучаете эти уроки по порядку, тогда вы, возможно, ещё не рассматривали layout. Просто держите в уме, что замещаемые элементы, становясь частью grid- или flex-разметки, ведут себя иначе по умолчанию, главным образом, чтобы избежать их странного растяжения по разметке.
Для того чтобы заставить изображение растянуться чтобы заполнить grid-ячейку, вы должны сделать что-то наподобие следующего:
img width: 100%; height: 100%; >
Это, однако, растянет изображение, и скорее всего это не то чего бы вам хотелось делать.
Элементы форм
Элементы форм могут быть сложной проблемой когда дело касается их стилизации в CSS, и Web Forms module содержит детальные руководства по хитрым аспектам стилизации элементов форм, которые я не буду представлять здесь в полном объёме. В этом разделе статьи стоит выделить несколько ключевых моментов.
HTML5 также содержит атрибуты, которые позволяют веб-разработчикам указывать какие поля являются обязательными и даже тип контента, который необходимо вводить. Если пользователь вводит неожидаемые данные или оставляет обязательные поля пустыми, браузер может выдать сообщение об ошибке. Разные браузеры несовместимы в том, сколько стилей и настроек они допускают для таких элементов.
Стилизация элементов ввода текста
Элементы, позволяющие вводить текст, такие как , конкретные типы вроде , и элемент , являются довольно простыми в стилизации и как правило ведут себя также, как и другие блоки на вашей странице. Однако, стилизация по умолчанию таких элементов будет отличаться в зависимости от операционной системы и браузера которые использует пользователь, посещая сайт.
В примере ниже мы стилизовали несколько вводов текста используя CSS — вы можете увидеть, что такие вещи как borders, margins и padding, все применяются так как вы бы ожидали. Мы используем селекторы атрибутов для выборов различных типов ввода. Попробуйте изменить то, как эти формы выглядят, регулируя границы, добавляя цвет фона полям и изменяя шрифты padding.
Предупреждение: Важно: При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все ещё очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить её.
Как объяснено в уроке стилизация форм в части HTML этого курса, многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.
Наследование и элементы форм
В некоторых браузерах, элементы форм не наследуют стиль шрифтов по умолчанию. Поэтому если вы хотите быть уверенными что ваши поля форм используют шрифт определённый в body или родительском элементе, вы должны добавить это правило в ваш CSS.
button, input, select, textarea font-family: inherit; font-size: 100%; >
Элементы форм и box-sizing
В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов. вы изучали свойство box-sizing в нашем уроке Блоки в CSS и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.
Для единообразия рекомендуется устанавливать margin и padding на 0 для всех элементов, а затем добавлять их (margin и padding) при стилизации отдельных элементов.
button, input, select, textarea box-sizing: border-box; padding: 0; margin: 0; >
Другие полезные настройки
В дополнение к правилам отмеченных выше, вы должны также установить overflow: auto для чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:
textarea overflow: auto; >
Собираем все вместе в «перезагрузку»
В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:
button, input, select, textarea font-family: inherit; font-size: 100%; box-sizing: border-box; padding: 0; margin: 0; > textarea overflow: auto; >
Примечание: Normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects. Typically these do similar things to those described above, making sure that anything different across browsers is set to a consistent default before you do your own work on the CSS. They are not as important as they once were, as browsers are typically more consistent than in the past. However if you want to take a look at one example, check out Normalize.css, which is a very popular stylesheet used as a base by many projects.
Для дополнительной информации по стилизации форм, посмотрите две статьи в разделе HTML этого руководства.
Summary
This lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in CSS. In the next article we’ll look over a few tips you’ll find useful when you have to style HTML tables.
In this module
- Cascade and inheritance
- CSS selectors
- Type, class, and ID selectors
- Attribute selectors
- Pseudo-classes and pseudo-elements
- Combinators
- The box model
- Backgrounds and borders
- Handling different text directions
- Overflowing content
- Values and units
- Sizing items in CSS
- Images, media, and form elements
- Styling tables
- Debugging CSS
- Organizing your CSS (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.