Inter-Net.PRO

Как задать размер для изображений

  • 29
11 июнь 2019 20:35 - 12 июнь 2019 07:05 #1 от Олександр Мойко
Чтобы делать рисунки разной величины надо просто в сss убрать параметр задающий размер всем рисункам, и тогда придется в материалах задавать размер каждого рисунка? правильно? Или есть хитрые способы как задать больший размер нужным рисункам ?

  • 410 104
12 июнь 2019 08:12 - 13 июнь 2019 13:22 #2 от Inter-Net PRO

Олександр Мойко пишет: делать рисунки разной величины

Ну во первых, можно задать размеры изображению внутри тега img через атрибуты width и height. Пример:
<img src="/images/name.jpg" width="600" height="400" alt="">
Тут нужно сказать, что не нужно стесняться пользоваться гуглом и смотреть в документацию. По началу непривычно, потом очень помогает.
Документация по img:  https://developer.mozilla.org/ru/docs/Web/HTML/Element/img
В учебнике HTML:  http://htmlbook.ru/html/img
**developer.mozilla.org - это официальная документация для веба. В комитете (главная контора по вебу) когда то решили что будут всё документировать именно на этом сайте. Конечно полная версия это на английском, на русский уже волонтёры переводят.

Так же размеры можно задать через атрибут style. Пример:
<img src="/images/name.jpg" alt="" style="width: 600px; height: 400px;">
Получается тоже самое. Из этих двух способов предпочтительней второй - через атрибут style.

Но данный подход задавать размеры инлайново не совсем практичный если у нас у картинок идут однотипные размеры. Например мы поставили по три картинки в ряд, а потом через время изменяем размер колонки в которой находятся блоки с изображениями (колонка с меню или колонка с контентом) - уменьшаем или увеличиваем и у нас картинки уже некрасиво стоят в этих блоках. Приходится потом вручную изменять размеры у каждой картинки.
Поэтому типовые размеры лучше задавать через CSS. Тогда проще в файле css поменять одно-два значения, чем у каждой картинки.

Придумываем названия для наших классов, возьму smallmedium и big. В css прописываем размеры для этих классов:
.small {
    width: 150px;
    height: 100px;
}
.medium {
    width: 600px;
    height: 400px;
}
.big {
    width: 3000px;
    height: 2000px;
}
Обратите внимание что в CSS перед названием стоит точка. Это индикатор того что это имя класса.
Для атрибута id перед названием айдишника ставится символ #
#nameid {

}
Если описываем стили просто для тега, то в css перед названием тега ничего не ставится:
img {

}
Это я привёл примеры как браузер определяет стили для тегов и атрибутов.


Теперь в HTML в атрибуте class вставляем картинке название класса с нужным нам размером:
<img class="small" src="/images/name.jpg" >
и картинка будет размером 150х100px.

Если у картинки уже есть какой то класс, то мы можем просто через пробел добавить к нему класс с нашим размером:
<img class="test1 small" src="/images/name.jpg">
<img class="test2 medium" src="/images/name.jpg">
<img class="test3 big" src="/images/name.jpg">
Классов можно напихать неограниченное количество. Главное чтобы они разделялись пробелами:
<img class="test bg small abc qwerty xxxl col-4 col-md-12 spTut we_ttt" src="/images/name.jpg">
test, bg, small, abc, qwerty, xxxl, col-4, col-md-12, spTut, we_ttt - это всё имена классов и для каждого из них можно в css прописать свойства.
Если между именами классов получилось не по одному пробелу, а два-три и более, то ничего страшного в этом нет. Это не будет ошибкой.

Ну и наверное нужно пару строчек сказать про то, что в именах для классов можно использовать строчные и заглавные символы, дефиз и нижнее подчёркивание.
В именах классов можно так же использовать цифры, с условием что имя не может начинаться с цифры.
Спасибо сказали: Олександр Мойко

Авторизация

Войти через соцсети: