Можно ли узнать размеры контейнера для картинки динамически?

#javascript #html #jquery #css #aspnet_mvc

Пользователь при создании новости на сайте должен загрузить заставку(картинку) для
этой новости. Новость создана, проверена модератором, уходит в новостную ленту. Какие
есть способы сжать картинки, когда они рендерятся на страницу, чтобы уменьшить количество
загружаемых данных?
Платформа Asp.Net MVC 4, есть несколько вариантов, по крайней мере известных мне:


Можно сохранять картинку на сервере и далее сжимать ее сторонней программой без потери
качества. Вариант очень плохой.
Сжимать картинку сразу при ее добавлении на сервер и далее выплевывать ее уже сжатой,
но качество картинки будет страдать.Вариант получше, но тоже не торт.
Через HttpHandler (уже написал теперь пробую), который ловит request и возвращает
сжатую картинку, но и тут возникает проблема, когда я начинаю обрабатывать эту картинку
я указываю у нее размер и степень сжатия(или качества). Если размер не указывать, то
объем картинки, конечно уменьшается, но не на столько, насколько с размером. Макет
страницы резиновый, по-этому точный размер картинки я задать не могу, для каких то
частей сайта, да он фиксированный например для аватара пользователя, но для большинства
нет. Вот тут и возникает вопрос можно ли как то это сделать динамически, под разный
размер экрана пользователя? Чтобы в мой request еще приходили примерные размеры картинки,
для той или иной области.


Прим. контейнер для картинки:



figure {
  width: 100%;
  height: 400px;
  position: relative;
}

figure img {
  width: 100%;
  height: 100%;
  display: block;
}

  
  

    

      
       @Model.NewDateAdd.ToShortDateString()
    

    
    

      

          @Model.BlogName
      

      
      

         @Model.CountLikes
                    
      
      
    

    
  

  






Нужно вычислить размеры W и H контейнера "figure", его CSS
    

Ответы

Ответ 1

Гораздо лучше для этой цели подойдёт использование атрибута srcset или элемента ,
которые позволяют браузеру выбирать подходящее изображение в зависимости от параметров
экрана. Подробнее про гибкие изображения на MDN.

В таком случае размеры можно указать в query-параметрах и пересжать уже под них в
хэндлере. Впрочем, я бы пожалел процессорное время и просто держал на диске несколько
картинок под разные размеры и сжимал сразу при загрузке.

Кстати, возможно, при сжатии стоит обратить внимание на начальный формат - jpg/png
и сохранить его, чтобы избежать артефактов сжатия на png. Ну и отдельный вопрос про
анимированный gif.


Ответ 2

var container = document.getElementsByClassName("container");
console.log("Width = " + container[0].clientWidth + "px" + "\n " + "Height = " +
container[0].clientHeight + "px")
header {
  width: 500px;
  height: 300px;
  background: blue;
}

.container {
  width: 100%;
  height: 100%;
  background: #000;
}