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

Как сжать картинку css

  • автор:

Размеры изображения

Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.

Чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height . Пример:

В примере изображению задана ширина 100px . Обратите внимание, что в атрибуте width после цифры нет px . Если вы задаёте размер картинки в пикселях, то используйте просто цифры. Добавлять px не нужно, таков стандарт.

Во втором примере изображению задана относительная ширина, 50 процентов:

Высоту в процентах обычно не задают.

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

Если же задать и ширину, и высоту для картинки:

То браузер может нарушить пропорции исходного изображения.

Перейти к заданию

  • index.html Сплит-режим

Как уменьшить картинки для мобильной версии?

Author24 — интернет-сервис помощи студентам

Здраствуйте, есть блок с картинками, которых нужно расположить в мобильной версии на всю ширину, знаю как это делать через @media, но не знаю как сделать что бы они занимали всю ширину, и не выходили за размер экрана, они все разной ширины, и прописать фиксированную ширину не выйдет, как решить это?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как для web-версии и мобильной версии поставить разные картинки
Всем добрый вечер! Кто знает, подскажите: мне необходимо для вебверсии и мобильной версии поставить.

Как в мобильной версии сайта через css задать размер картинки
Добрый вечер. Помогите пожалуйста. сайт https://airkolors.com/10-clever-lighting-design-ideas как в.

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

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

1594 / 865 / 279
Регистрация: 17.07.2021
Сообщений: 1,781
Записей в блоге: 12
прописать width 100%
Регистрация: 16.04.2019
Сообщений: 50

Прописываю width 100%, и ничего не меняется, как для отцовского элемента, так и непосредственно самим картинкам

1 2 3 4 5 6 7 8 9
div class="partners container-fluid"> div class="img-partners"> img class="partners-img" src="./assets/img/partners/logo.svg" alt="" /> img class="partners-img" src="./assets/img/partners/logo-1.svg" alt="" /> img class="partners-img" src="./assets/img/partners/logo-2.svg" alt="" /> img class="partners-img" src="./assets/img/partners/logo-3.svg" alt="" /> img class="partners-img" src="./assets/img/partners/logo-4.svg" alt="" /> /div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13
.partners{ width: 100%; } .img-partners { display: flex; justify-content: space-between; margin-top: 320px; width: 100%; } .partners-img{ width: 100%; }

Регистрация: 26.07.2021
Сообщений: 38

1 2 3 4 5
@media only screen and (max-width: 1215px) { .img-partners{ width: calc(100%); } }

Регистрация: 06.08.2021
Сообщений: 413

TheOnlyFirst, я решил это вопрос без камасутры. В фотошоп сделал крошечный action с Image Size нужноного размера, потом Fle-Automate-Batch и всю папку подсунул с почти две тысячи картинок. На сервере завел еще одну папку для малюсенького размера. Поднимаю или нормальный размер, или малюсенький для телефона. Все эти css работают на стороне клиента, т.е. дополнит. время если картинок много.

Регистрация: 16.04.2019
Сообщений: 50
К сожалению не сработало
Регистрация: 16.04.2019
Сообщений: 50

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

1594 / 865 / 279
Регистрация: 17.07.2021
Сообщений: 1,781
Записей в блоге: 12

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
 html> head> title>title> style> * { padding: 0; margin: 0; box-sizing: border-box; } .ex-container { resize: both; position: relative; height: 100%; width: 100%; } img { width: 100%; height: auto; background: green; } style> head> body> div class="ex-container"> img width="400" height="300"> div> script> script> body> html>

Регистрация: 19.07.2021
Сообщений: 79

ЦитатаСообщение от TheOnlyFirst Посмотреть сообщение

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

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

1 2 3 4 5 6 7 8 9
div class="partners container-fluid"> ul class="img-partners"> li>img class="partners-img" src="./assets/img/partners/logo.svg" alt="" />/li> li>img class="partners-img" src="./assets/img/partners/logo-1.svg" alt="" />/li> li>img class="partners-img" src="./assets/img/partners/logo-2.svg" alt="" />/li> li>img class="partners-img" src="./assets/img/partners/logo-3.svg" alt="" />/li> li>img class="partners-img" src="./assets/img/partners/logo-4.svg" alt="" />/li> /ul> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14
.img-partners{ display: flex; justify-content: space-between; width: 100%; list-style: none; margin: 0; padding: 0; } .img-partners>li { padding: 5px; } .partners-img { width:100%; }

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как сделать разный фон для ПК и мобильной версии сайта
Добрый день, хочу сделать так, чтобы для мобильной и ПК версии сайта были разный фон. Если так.

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

DIV для мобильной версии
Здравствуйте! Подскажите, пожалуйста, можно ли задать такие свойства для DIV, чтобы содержимое.

Меню для мобильной версии сайта
Привет всем, есть сайт и мне надо сделать меню для мобильной версии, использую адаптивную версту.

Margin-top для мобильной версии
всем доброго дня! На сайте мне необходимо назначить стиль для секции — margin-top: -70px, а в.

Оптимизация контента для мобильной версии
Добрый день, У меня есть блок в виде таблицы <table style=’max-width: 100%’> <tr> <td><a.

Или воспользуйтесь поиском по форуму:

Как правильно изменять размер изображений с помощью CSS/HTML?

Имеются изображения разных размеров(ширина, высота), которые выводятся с помощью . Данное изображение мне нужно уменьшить до 64px(width,height). Указываю как работает. Но изображения разных размеров уменьшаются как попало. То сжатые, то приплюснутые. Как сделать так, чтобы сохранились пропорции изображения при 64px height и width?
Присутствует Bootstrap 3

  • Вопрос задан более трёх лет назад
  • 60155 просмотров

Комментировать
Решения вопроса 1

black_wolf1894

Тимофей Белоусов @black_wolf1894
Junior Front End Developer
Ответ написан более трёх лет назад
Нравится 6 2 комментария

FreeMan94

Если указаны width и height в html — то не работает

black_wolf1894

Тимофей Белоусов @black_wolf1894
Антон Якунов: ну ясное дело, приоритеты никто не отменял, пихни импорт и будет чудо.
Ответы на вопрос 4

Suntechnic

Александр Маджугин @Suntechnic

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

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

если только img тогда надо определится что важнее высота или ширина картинок
в стилях им
display: inline-block \ block;
width: 64px(auto);
height: auto(64px);
в первом случае приоритет ширины, во втором высоты будет.
я, как правило, использую в таких случаях блок с заданными размерами style=»background: url(img.jpg) center center;»
можно еще поиграться с background-size
а вообще Suntechnic прав, пережимайте фотки под нужные контейнеры на стороне сервера и в кеш их
в бутстрапе 3 есть класс img-respontive кстати.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

RainMEN

HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.

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

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

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

Раньше я при публикации записи на WordPress подготавливал несколько вариантов одной и той же картинки с разными размерами. Большие (оригинального размера) использовались для показа в галерее, средние в теле самой записи, а маленькие в качестве миниатюр (thumbnail).

Со временем, мне надоело это делать из-за временных затрат и ошибок, которые нет-нет, да возникали при ручном преобразовании. Кроме того у меня возникали сложности при смене дизайна сайта, когда требовались другие размеры для изображений. Поэтому я стал преобразовывать картинки «на лету» с помощью WordPress плагина Kama Thumbnail. Спасибо автору за этот отличный плагин!

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

Css-свойство object-fit

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

Здесь проще всего показать все на примерах. Допустим у нас есть две картинки размерами 200х300 пикселей и 300х200 пикселей, а для миниатюр к постам мы хотим использовать изображение размером 200х200 пикселей. Разумно, чтобы первичные изображения полностью заполняли миниатюру с сохранением пропорций, а лишние части (сверху/снизу или слева/справа) отсекались.

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

Чтобы реализовать задуманное нужно использовать ключевое значение object-fit: cover;, при его использовании лишнее содержимое изображения обрезается, а итоговая картинка выравнивается по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.

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

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

img.object-fit-cover

Сам вывод изображения может быть таким:

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

Достоинства и недостатки преобразования размеров изображений средствами одного CSS

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

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

Кроме того, если для миниатюры 100х100 пикселей использовать картинку формата FullHD 1920×1080, то сначала она полностью скачается на компьютер пользователя, а лишь затем браузер приведет ее к формату 100х100. Как вы понимаете размер таких изображений (1920×1080 и 100х100) может различаться в 10 раз, и это может замедлить работу сайта на слабых компьютерах и медленном интернете (например на телефонах и планшетах в сетях 2G/3G)!

На мой взгляд плюсы перевешивают минусы.

Благодарности

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

  1. https://developer.mozilla.org/ru/docs/Web/CSS/object-fit
  2. https://html5book.ru/svoystva-object-fit-i-object-position/

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

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