Изменение размеров img в зависимости от размера родителя
Стоит задача создания карты-схемы территории. Карта представляет собой png-файл, на котором нарисованы здания. Каждое здание имеет отдельную картинку (тоже самое здание, которое подсвечено и обладает булавкой с номером здания). Нужно , чтобы при наведении на здание появлялась данная картинка. Думаю реализовать так: разместить поверх карты-картинки над каждым зданием div-блоки, при наведении на div-блок показывать картинку здания. Проблема в том, что сами блоки и картинки здания нужно «скейлить» в зависимости от размера окна. Сейчас размещаю так:
В css-файле:
.SchemeTerritoryImage < margin: 40px auto; /* верхний и нижний отступы и горизонтальное выравнивание */ position: absolute; >
Размещение объектов вроде понял, как сделать. А как изменять размер div-блоков и img, не знаю, возможно через js-скрипт. Возможно, Вы подскажите иную реализацию?
Изображения
Документация и примеры приведения изображений к отзывчивому поведению (так, чтобы их размер не выходил за рамки родительского элемента) и добавления к ним «легковесных» стилей – всё посредством классов.
Отзывчивые изображения
Изображения в Bootstrap делаются «отзывчивыми» с помощью .img-fluid . max-width: 100%; и height: auto; применяемых к изображению, которое т.о. масштабируется по родительскому элементу.
Выравнивание изображений
Выравнивайте изображения вспомогательными классами выравнивания по стороне или классами выравнивания текста. Блочные изображения block можно центрировать использованием класса утилиты «марджина» the .mx-auto .
class="text-center"> src=". " class="rounded" alt=". "> Картинка
Если вы используете элемент для привязки множественных элементов к определенному , добавьте классы .img-* в
, а не в .
srcset=". " type="image/svg+xml"> src=". " class="img-fluid img-thumbnail" alt=". "> Изменить размер
Изменить размер JPG, PNG, SVG или GIF путем установки новой высоты и ширины пикселей.
Масштабировать несколько изображений сразу.
или перетащите изображения сюда
Параметры изменения размера
В пикселях
В процентах
МАКСИМАЛЬНОМУ РАЗМЕРУ ? ТОЧНЫЙ РАЗМЕР —> Измените размер всех изображений на максимальный ? точный в
Сохранять пропорции
Не увеличивать, если меньше
меньше на 75%
Информация
Вы пытаетесь изменить размер изображений разных размеров, сохраняя исходную пропорцию. Значения ширина и высота будут считаться максимальными значениями.
Вы можете проверить полученные значения ширины и высоты под каждым предварительным просмотром изображения.
Получение файлов от Drive
Получение файлов от Dropbox
Загрузка 0 файла из 0
Оставшееся время — секунд — Скорость загрузки — МБ/С
Изменение размера изображений.
Как правильно изменять размер изображений с помощью CSS/HTML?
Имеются изображения разных размеров(ширина, высота), которые выводятся с помощью . Данное изображение мне нужно уменьшить до 64px(width,height). Указываю как работает. Но изображения разных размеров уменьшаются как попало. То сжатые, то приплюснутые. Как сделать так, чтобы сохранились пропорции изображения при 64px height и width?
Присутствует Bootstrap 3
- Вопрос задан более трёх лет назад
- 59875 просмотров
Комментировать
Решения вопроса 1
Тимофей Белоусов @black_wolf1894
Junior Front End Developer
Ответ написан более трёх лет назад
Нравится 6 2 комментария
Если указаны width и height в html — то не работает
Тимофей Белоусов @black_wolf1894
Антон Якунов: ну ясное дело, приоритеты никто не отменял, пихни импорт и будет чудо.
Ответы на вопрос 4
Александр Маджугин @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 кстати.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
HTML/STYLUS/JADE/JS/Laravel/Joomla/DLE и т.д.
На самом деле что бы получить более менее правильные пропорции картинки то нужно писать скрипт который на стороне сервера просчитает пропорции под твой размер обркжет картинку и отдаст тебе готовую твоих размеров, но в любом случае этот метод использовать только в том случае если тебе нужно обработать очень много изображений разных пропорции , так как он не даст желаемого результата.