Размеры изображения
Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.
Чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height . Пример:
В примере изображению задана ширина 100px . Обратите внимание, что в атрибуте width после цифры нет px . Если вы задаёте размер картинки в пикселях, то используйте просто цифры. Добавлять px не нужно, таков стандарт.
Во втором примере изображению задана относительная ширина, 50 процентов:
Высоту в процентах обычно не задают.
Если задать только один из размеров, ширину или высоту, то вторую размерность браузер вычислит самостоятельно исходя из пропорций изображения.
Если же задать и ширину, и высоту для картинки:
То браузер может нарушить пропорции исходного изображения.
Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 16 января 2024. Всего от 5 250 ₽ в месяц.
Перейти к заданию
- index.html Сплит-режим
Как изменить размер изображения при изменения окна браузера в vue?
Добрый день.
Создаю тестовое приложение.
Вставил слайдер.
in ads" :key="id"> >
Сейчас изображение имеет размер 1920×900.
Можно как-то задать размер изображения по умолчанию, и если я вставлю ссылку на изображение которое будет больше или меньше, vue автоматически задаст размер, который по дефолту. И когда в коде открою картину в новой вкладке в браузере, он будет иметь размер по-дефолту.
Я работаю еще с worpdress, там есть классный плагин kama_thumbnail, который имеет такие возможности. Потом, допустим на мобильном, я проверяю, если окно браузера меньше 576, то тогда я показываю другое изображение с другими размерами.
" alt=""> 
" alt="">Заранее благодарен за помощь.
- Вопрос задан более двух лет назад
- 309 просмотров
Комментировать
Решения вопроса 1
Вадим @MrDecoy Куратор тега HTML
Верставший фронтендер
Идеальный путь:
Для случая, когда у Вас уже есть все необходимые размеры изображений:
picture
Если их нет, то на фронте ресайзить картинки не надо.
У вас на бэке должен быть ресайзер картинок, который по урлу отдаёт картинку определённого размера.
Например: https://mySite/assets/img/640/480/picture.png — возвращает картинку с оригинальным размером 640х480.
А на фронте, во vue в Вашем случае, Вам тогда просто нужно будет написать миксин или компонент картинки, в который нужно будет передавать размеры картинки и её название, и чтобы возвращался либо корректный путь до картинки, если это метод миксина, либо картинка с правильным урлом.
И в конечном итоге это опять же нас возвращает к picture.
Нормальный путь(Если Вы занимаетесь оптимизацией графики):
Пользуйтесь CSS media — на брэйкпоинтах меняйте картинке ширину и высоты.
Плохой путь:
Вешайтесь на ресайз окна и подменяйте атрибуты ширины и высоты для картинки.
Как изменить размер картинки через 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
Мне кажется будет лучше если просто немного перефразируете свой 🙂 П.С. Я просто в суть вопроса не вникал если честно то просто увидел ваш ответ и вот 🙂
Размер картинки в 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. Используйте эти знания и изображения на ваших сайтах будут смотреться ровно и красиво.