Масштабирование картинки с сохранением пропорций
Все хорошо работает, если картинка больше, чем размеры div . А если картинка маленькая, то она так маленькая и рисуется. Как сделать, чтобы она увеличивалась до размеров div , но сохраняла пропорции? Причём я не знаю, что у неё больше: высота или ширина. И ещё надо, чтобы она располагалась по центру, а свободные края заполнялись чёрным цветом.
Отслеживать
4,542 3 3 золотых знака 16 16 серебряных знаков 53 53 бронзовых знака
задан 20 окт 2014 в 10:32
Helena2977 Helena2977
621 1 1 золотой знак 5 5 серебряных знаков 17 17 бронзовых знаков
Попробуйте вместо max-height задать height: auto;
20 окт 2014 в 10:44
Ничего не изменилось. Так же маленькая картинка остается маленькой.
20 окт 2014 в 11:07
То есть вы хотите одновременно и сохранять пропорции, и растягивать картинку во всю высоту и ширину дива?
20 окт 2014 в 11:10
Я хочу сохранять пропорции, а катринку растягивать на div так, чтобы либо по ширине, либо по длине уперлась в края.
20 окт 2014 в 12:02
Для заполнения свободных краев можно использовать background. Для сохранения пропорций достаточно указывать только одно измерение width или height А вот какое именно измерение указать, тот тут на ум мне приходит только использовать JavaScript. Ну для примера: $( window ).ready(function() < var img = $("#myimage"); img.attr("naturalWidth") >img.attr(«naturalHeight») ? img.attr(«width»,»120px») : img.attr(«height»,»120px»); >) Как это сделать через CSS не придумал.
20 окт 2014 в 12:25
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Если не интересует поддержка старых версий IE, и картинка может быть бэкграундом, то к div
нужно применить следующие стили:
.photoBorder < margin-top: 20px; width: 120px; height: 120px; //стили которые непостредственно масштабируют картинку с сохранением пропорций background-repeat : no-repeat; background-size : cover; background-position-x : 50%; background-position-y : 50%; >Отслеживать
ответ дан 20 окт 2014 в 13:48
3,521 12 12 серебряных знаков 20 20 бронзовых знаков
Alex: теперь все время true дает и поэтому ширину выставляет. ____ Похоже, у него нет naturalHeight вообще. ____ А нет, нашла, все есть, но что-то все равно не работает.
20 окт 2014 в 14:10
А зачем Вам JavaScript? Я предложил Вам решение на чистом CSS, как Вы и хотели.
20 окт 2014 в 14:30
У меня картинка меняется скриптом, а я не уверена, что ее так же легко можно поменять, если она в background задана. Во всяком случае это тоже надо пробовать. Поэтому я сначала пробую один вариант. Если не получится, то попробую Ваш тоже. И потом, тогда я ведь не смогу задать background чернам цветом, или можно тоже? ____ то Alex, в другом совсем дело. Эта функция вызывается только при прорисовке окна, а потом я меняю картинку, а она уже не вызывается.
20 окт 2014 в 14:55
Я подправил ответ непосредственно под Ваш код. Возможно, это внесет некоторую ясность. К вопросу того, что не работает Javascript: нужно делать пересчет всех размеров на image.onload.
20 окт 2014 в 15:05
Не получается со вторым вариантом тоже. Дает ошибку 404 на адрес, где картинка берется, хотя адрес правильный показывает. А как навесить на image.onload? ____ Уже нашла сама. Спасибо большое, zhenyab и Alex Krass. Вы мне очень помогли.
HTML: Изменение размера картинки
Если для картинки в HTML коде не указаны размеры, то браузер будет отображать её в естественном размере, но он не сможет определить размер до тех пор, пока картинка загружается и анализируется. Тем временем вероятно браузер уже скачал всю HTML-разметку и текст, а изображения будут появляться на своем месте только после их загрузки. Для размещения изображений после анализа их размера, браузер может перестраивать заново разметку, что может быть не приемлемо, если пользователь уже начал читать текст на странице. Для того, чтобы браузер заранее зарезервировал пространство нужного размера для отображения картинки можно воспользоваться атрибутами width (ширина картинки) и height (высота картинки) тега , в которых в качестве значений указываются ширина и высота картинки в пикселях без указания самой единицы измерения.
Если атрибуты width и height содержат значения не соответствующие натуральному размеру картинки, браузер будет масштабировать картинку под эти размеры. Однако обычно следует избегать изменения размеров картинки таким образом. Когда браузер масштабирует картинку в большую или меньшую сторону от ее натурального размера, то картинка может отображаться менее четко или более резко. В идеале в атрибутах width и height должны быть указаны натуральные размеры, а для увеличения или уменьшения картинок лучше воспользоваться графическим редактором.
Заголовок страницы
Вы можете сделать изображение больше или меньше, изменяя значения атрибутов width и height. Но при очень большом увеличении качество картинки может стать хуже.
Если вы решили изменить размер картинки с помощью атрибутов width и height , то следует соблюдать пропорции между шириной и высотой картинки. Изменение пропорций размера картинки приведет к её деформации.
Примечание: чтобы не вычислять пропорции для высоты и ширины картинки, можно просто задать только один из атрибутов или width или height , в зависимости от того, какой из размеров в данной ситуации вам важнее ширина или высота картинки. В случае указания только одного атрибута, второй размер (ширину или высоту) браузер подберёт автоматически. Вы можете проверить это на предыдущем примере, стерев для картинки в коде один из атрибутов, задающих размер.
С этой темой смотрят:
- HTML картинки, форматы изображений
- Как вставить картинку в html
- Как сделать картинку ссылкой
- HTML тег
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
Как задать размеры картинки в css
Есть ли значение размеров изображения / картинки по умолчанию? Давайте разбираться!
У нас есть картинка лого, на ней и потренируемся! Возьмем её адрес и поместим в тег img
Чтобы мы могли увидеть границы картинки, добавим ему «border: 2px solid #e2e2e2;».
Удалим все отступы и самое главное все размеры см. WIDTH и HEIGHT css
max-width: unset !important;
border: 2px solid #e2e2e2;
WIDTH : unset;
HEIGHT : unset;
Сомтрим, что у нас получилось:
Результат: картинка у которой никак размеры не прописаны
Сравниваем размеры картинки по умолчанию.
И теперь нам остается сравнить размер картинки на компьютере и на странице сайта.
Открываем исследовать элемент и при наведении курсора на код картинки, мы получим изображение картинки по умолчанию :
И смотрим размер картинки этой же на компьютере:
Как видим — если не прописаны высота ии ширина- размеры картинки, картинка будет показываться по реальному размеру, которая она имеет физически.
Как изменять размер картинки в html
Как изменить размер картинка на сайте!? Создадим новый класс и добавим его картинке. + добавим border другим цветом — red , чтобы отличие было сразу видно.
+ Изменим высоту с по умолчанию(300) на новый размер, изменим только высоту » WIDTH: 500px; »
max-width: unset !important;
border: 2px solid red ;
WIDTH: 500px;
Результат изменения размеров картинки
Теперь давайте посмотрим размеры картинки в коде:
Как видим, размеры картинки изменились :
Вначале идут размеры картинки, которые мы установили новые .
И вторые размеры(intrinsic) — размеры по умолчанию.
И обращаю ваше внимание на то, что размеры картинки изменились пропорционально. Высоту картинки не нужно указывать — браузер масштабирует картинку пропорционально размерам картинки по умолчанию!
Пример непропорционального изменения размеров картинки
Чтобы продемонстрировать не пропорциональное изменение размеров картинки, добавим » HEIGHT: 500px; » и бордюр покрасим в синий.
Css:
max-width: unset !important;
border: 2px solid blue;
Как видим, картинка растянулась на указанную высоту :
Ограничить размер картинки html
Можно ли ограничить размер картинки через css!? Легко!
Возьмем нашу картинку лого, которая, как вы помните из первого пункта имеет ширину 300px? давайте посмотрим на неё по умолчанию :
Теперь добавим свойство » max-width: 150px » и желтый бордюр :
Как видим. картинка не увеличилась более максимально установленной ширины:
css:
border: 2px solid #ffe800;
Размер картинки в процентах
Следующим пунктом поставим картинке размеры в процентах — width: 100%; и цвет бордюра. пусть будет зеленый :
css:
border: 2px solid #36ff00;
Размер картинки высота 100%
Как видим при размерах картинки 100% — картинка заполнит всю ширину родительского блока.
Размер картинки высота 70%
Следующим. поставим размер картинки — ширину 70%:
Автоподгон, авторесайз изображения под DIV
Истинные размеры картинки — могут быть любые. Внимание! Вопрос. Как сделать так чтобы картинка вписывалась в размер DIV по ширине и высоте, и пропорционально увеличивалась или уменьшалась, если DIV будет менять размеры (а он будет менять размеры)? Аналог на CSS для DIV:
.img-container
Отслеживать
задан 14 окт 2013 в 8:53
495 1 1 золотой знак 7 7 серебряных знаков 16 16 бронзовых знаков
10 ответов 10
Сортировка: Сброс на вариант по умолчанию
вот пример когда контейнер ресайзится в результате ресайза окна
jQuery(function ($) < function fix_size() < var images = $('.img-container img'); images.each(setsize); function setsize() < var img = $(this), img_dom = img.get(0), container = img.parents('.img-container'); if (img_dom.complete) < resize(); >else img.one('load', resize); function resize() < if ((container.width() / container.height()) < (img_dom.width / img_dom.height)) < img.width('100%'); img.height('auto'); return; >img.height('100%'); img.width('auto'); > > > $(window).on('resize', fix_size); fix_size(); >); если хотите без jQuery, это реально, но делайте сами 🙂
Отслеживать
ответ дан 14 окт 2013 в 9:26
18.1k 20 20 серебряных знаков 42 42 бронзовых знака
Понятное дело что без jQuery не обойтись (или без JS). Суть не в том. Нужен заполненый картинкой DIV :jsfiddle.net/chetson/bQjk8/2/#update
14 окт 2013 в 9:36
так div не может быть заполнен, если пропорции не совпадают. вам обрезать что-ли надо ?
14 окт 2013 в 9:38
Вот в ВК к примеру — фотогаллерея. Изображения подстраиваются под заданный размер div и отсекается лишние от картинки, img вписывается в DIV и выглядит очень хорошо. В моем случае имеется еще и адаптивный интерфейс, в котором эти DIV еще и меняются. Было бы конечно проще в php цикле выводить что то типа Но это не дружелюбно для СЕО и вообще плохой тон.
14 окт 2013 в 9:43
jsfiddle.net/oceog/bQjk8/3 типа этого, только не по центру становится, надо вычислять какие отрицательные margin приделать к картинке.
14 окт 2013 в 9:44
14 окт 2013 в 9:53
.panel < width: 300px; height: 200px; background: #fff; border: 1px solid #cecece; border-radius: 5px; position: absolute; >.container < width: 90%; height: 90%; border: 1px solid #cecece; border-radius: 5px; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; transform: translate(-50%, -50%); top: 50%; left: 50%; >img
Отслеживать
2,426 1 1 золотой знак 14 14 серебряных знаков 27 27 бронзовых знаков
ответ дан 1 ноя 2016 в 17:03
Yuriy Chaban Yuriy Chaban
395 4 4 серебряных знака 16 16 бронзовых знаков
к сожалению картинка вписывается только по высоте..
1 ноя 2016 в 19:46
А ларчик то просто открывается.
И будут у вас ВСЕ картинки на сайте подгоняться под размер вашего дива. Хоть со старта, хоть при таскании ширины/высоты окна браузера. И это применимо ко всему. Хоть картинка, хоть видео, хоть ещё что-то, что придумаете. Учите цсс и хтмл, прежде чем заниматься жабой.
Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
ответ дан 28 фев 2016 в 8:06
39 1 1 бронзовый знак
1 ноя 2016 в 19:26
Попробуйте сделать так:
.img-container < background-size: cover; width: 300px; // например height: 100px; overflow: hidden; >.img-container img
Обновление
Если не получится, попробуйте так
.img-container < background-size: cover; width: 300px; height: 100px; overflow: hidden; background-color: #F50000; text-align: center; >.img-container img
Средствами CSS это сложно реализовать (попробуйте в мой пример у .img-container в height подставить 300px; ). Можно попробовать с пом. ajax вычислять широту и высоту контейнера и отдавать параметры картинке img.
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
ответ дан 14 окт 2013 в 9:00
1,225 2 2 золотых знака 10 10 серебряных знаков 17 17 бронзовых знаков
Не очень получилось: jsfiddle.net/chetson/mcwML пропорции не соблюдаются
14 окт 2013 в 9:09
.img-container img
Отслеживать
ответ дан 22 фев 2018 в 15:41
Игорь Чугусов Игорь Чугусов
86 4 4 бронзовых знака
Думаю тут проще было бы все сделать через background:
Отслеживать
ответ дан 2 ноя 2016 в 9:30
user207693 user207693
.img-container
Если хочешь добавить адаптивность, еще один блок выше создай, сделай его flex, задай атрибут flex-wrap: wrap
Отслеживать
ответ дан 31 окт 2017 в 10:55
Vladislav Severin Vladislav Severin
79 1 1 серебряный знак 12 12 бронзовых знаков
Если через CSS, у тебя div с определенным классом, присвой картинке этот же класс, у тебя получится картинка такой же формы что и тот div в который ты ее «запихиваешь». И как раз таки при изменении параметров div’a этого класса, картинка будет тоже изменяться (увеличишь div в двое, то и картинка увеличится в двое). Так что если все грамотно сделать через классы, то это должно тебе помочь. Это мое субъективное мнение и как вариант помочь решить твою «проблему»
Отслеживать
ответ дан 13 ноя 2017 в 10:56
11 1 1 бронзовый знак
Для .img-container пишем следующее:
width: 200px; // произвольная ширина контейнера height: 150px; // произвольная высота контейнера display: flex; justify-content: center; // если нужно разместить по центру (горизонтали) Для img пишем следующее:
max-width: 100%; // не обязательно height: 100%; Свойство width задавать не надо, его менять на width: auto; нужно только в том случае, если это свойство было переопределено (например стилями браузера, подключенными библиотеками и т.д)
Суть в следующем:
Если задать для img width: 100% , то он растянет его на всю ширину блока. Поэтому мы задаем ему только height: 100% , тогда изображение влезет целиком, но не растянется. Свойство width вроде по дефолту стоит в auto , поэтому пропорции возьмутся из исходного состояния.