Как задать размер картинки в css
Для того чтобы задать необходимый размер картинки, необходимо воспользоваться свойствами: width — ширина картинки, height — высота картинки. Например:
img width: 100px; height: 100px; > Также можно указать размеры в %, что позволит установить соответствующие размеры в зависимости от размера родительского элемента.
/* родительский блок */ div width: 200px; > /* ширина картинки составит 60px */ img width: 30%; > Как уменьшить размер картинки в css
Уменьшаем картинку css — для этого вам понадобится:
Как вы наверное знаете, что существует «3 способа css».
Нам нужна какая-то картинка, чтобы её использовать для уменьшения картинки css. Пусть это будет картинка логотипа:
Внутрь тега img помещаем атрибут attribute style.
Внутри тега style записываем ширину(width) картинки меньше чем у оригинала(330px), пусть. это будет 100px:
Давайте посмотрим на уменьшенную картинку через css:
Уменьшаем картинку тег style.
Второй вариант «уменьшения картинки через css» — использовать style, для этого вам понадобится:
Опять тренировочная картинка:
Выше/ниже картинки записываем style.
Создаем. либо id, либо класс с произвольным названием.
Далее фигурные скобки.
Для уменьшения картинки изменим ширину картинки(width) = 100px; Высота картинки изменится пропорционально!
Соберем весь код:
Код css + html уменьшения картинки:
Пример выполнения кода css + html уменьшения картинки:
Вам остается расположить приведенный код уменьшения картинки css прямо здесь:
Уменьшаем картинку файл css.
Для того, чтобы уменьшить картинку через css — один из способов это файл(file css). для этого вам понадобится:
Снова тренировочная картинка:
Создадим новый класс.
Опять фигурные скобки.
Изменим width до 100px;
В него записываем:
.reducing_img_css_file < width:100px; >
Помещаем данный класс в тег img:
Смотрим на пример файла css с уменьшенной картинки css:
Теперь подключаем файл css. Точки поставлены для сокращения длины строки.
Выведем весь код:
Код уменьшения картинки css:
Пример уменьшения картинки css через файл:
Теперь поместим приведенный код «уменьшения картинки css» прямо здесь::
CSS: Как ограничить максимальный размер изображения до 450px?
Приветствую! Сабж. Нужно через css уменьшить размер картинки до 450px. Сама картинка может быть хоть 2000px, хоть 3000px. Но если картинка к примеру 300 или 449px то увеличивать её не надо. Это возможно?
- eTarget 2011:Панельная дискуссия «Стратегия и планирование рекламной кампании в интернете»
- eTarget 2011: Круглый стол «Реклама в онлайн-видео»
- Могут ли «плохие» входящие ссылки привести к ухудшению ранжирования?
21 декабря 2008, 12:38
max-width: 450px; //ширина
max-height: 450px; //высота
На сайте с 29.05.2008
21 декабря 2008, 12:57
Коновалов Сергей:
img <
max-width: 450px; //ширина
max-height: 450px; //высота
>
В ИЕ это не сработает.
насчет css не уверен, что так можно.
Я бы сделал в img: ��
На сайте с 28.12.2007
21 декабря 2008, 13:16
pajed:
Я бы сделал в img:
Nemesis-TNT:
если картинка к примеру 300 или 449px то увеличивать её не надо
я юзал пре-проверку на размер, подставляя скриптом имя класса для изображения. понимание того, что отдельный набор превьюшек решает пришло чуть позже 🙂 думаю к тс тоже придёт. даже быстрее, учитывая вводные:
Как уменьшить размер без потери качества в css?
Я так понимаю, под качеством имеются в виду пропорции. Когда, изначально не квадратная картинка, не пропорционально изменяется в размерах- страдает качество.
Делал так: создавал div, скажем 200×200 над картинкой, в итоге картинка любого размера виднелась в этом окошке.
Далее: широкие уменьшаем по высоте, высокие по ширине, лишнее останется «за окном». Пропорции соблюдены, картинка не будет хуже качеством, чем была.
Обзор «за окном» так же можно выруливать при помощи стилей, но это, совсем другая история ))
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Возможно вы ищите это — htmlbook.ru/css/image-rendering
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
попробуйте в блок, необходимого вам размера, поместить картинку, добавив к ней background-size:cover
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +1 ещё
Как расположить объекты в div в строчку?
- 1 подписчик
- 9 минут назад
- 14 просмотров