0

Допустим есть блок, в котором не указанна высота и есть изображение, которое задаёт высоту этому блоку, когда загрузится, но нам не нужно чтобы пользователь увидел как скачит высота блока -> нам нужно задать блоку фиксированные размеры в html, тогда у блока будет постоянные размеры на странице и сайт не будет прыгать пока загружаются все картинки. ТЕПЕРЬ ВОПРОС: Как указывать всем картинкам на сайте фиксированные размеры автоматически, чтобы не приписывать для каждой картинки стили в html с размерами

4
  • если вам важно сохранить размер, то через сервер с помощью php/python или чем вы будете на сервере работать, ставить блоку-обертке параметры высоты и ширины изображения.
    – Za Ars
    3 июл 2019 в 9:05
  • Проще будет дождаться окончательной загрузки изображений и показать блок (content) в котором находятся те самые блоки с изображениями.
    – De.Minov
    3 июл 2019 в 10:58
  • 1
    Скорее всего браузер не узнает размер картинок до того как они не будут загружены, тут есть способ stackoverflow.com/questions/6575159/…, но человек все равно увидит скачок. Скорее всего надо узнать размеры на бекенде перед отдачей в браузер. Либо хитрить на странице (комент от @CbIPoK2513)
    – Skywave
    3 июл 2019 в 12:17
  • скачет высота блока и постепенно увеличивается - это же разные вещи. Вы, какое определение имели в виду?
    – Dmytro
    3 июл 2019 в 13:33

2 ответа 2

0

Ты можешь сделать это через css. Советую использовать селектор класса вместо селектора тега.

img {
  height: 200px;
  max-width: 200px;
}
3
  • 1
    Это укажет размеры для всех картинок и я сильно сомневаюсь, что в этом есть какая-то практическая польза. Помимо нужных картинок вы зацепите ВСЕ картинки на странице - от логотипов до прочих вспомогательных логотипов. Как раз-таки лучше использовать более узкие селекторы. Во-вторых, я думаю, что выставляя размеры одинаковым образом вы не учитываете, что у каждой картинки свои размеры, для разных картинок ваш совет точно мимо.
    – A K
    3 июл 2019 в 9:38
  • 1. Вопрос автора: "ТЕПЕРЬ ВОПРОС: Как указывать всем картинкам". Обратите внимание, в вопросе говорится именно про "все" картинки и говорится именно о "фиксированном размере". 2. Я указал, что следует использовать селектор класса. 3 июл 2019 в 9:41
  • 2
    Ну да, но ведь первая же фраза была про "блок" - мне кажется стоит учитывать контекст вопроса. Вряд ли автору понравится, когда логотип 70 х 45 превратится в квадрат 200 х 200 )
    – A K
    3 июл 2019 в 9:43
0

style.css

div > img { /*за место div лучше исп. селектор класса (допустим .central-img)*/
max-height: 300px;  /*задаём ограничитель высоты по отношению к блоку, (ниже будет, выше 300px (как пример) нет)*/
width: auto;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.