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

Question

[Михаил Плюснин]

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

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

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

<figure class="box-shadow-3">
            <img src="@Url.Content(@Model.NewImages)" />
            <figcaption class="text-white">
                <div class="publication-date padding-all-10 border-right-bottom" title="Дата публикации">
                    <i class="fa fa-calendar"></i><span>&nbsp;@Model.NewDateAdd.ToShortDateString()</span>
                </div>
                <!-- /.publication-date -->
                <div id="newAuthor" class="padding-all-10 col-md-8 border-left-top text-center">
                    <div class="col-md-8" title="Блог">
                        <i class="fa fa-rss"></i>&nbsp;&nbsp;@Model.BlogName
                    </div>
                    <!-- /.col-md-8 -->
                    <div class="col-md-4" title="Количество лайков">
                        <i class="fa fa-thumbs-up">&nbsp;<span id="NewCountLikes">@Model.CountLikes</span></i>
                    </div>
                    <!-- /.col-md-4 -->
                </div>
                <!-- /#newAuthor -->
            </figcaption>
            <!-- /figcaption -->
        </figure>
        <!-- /figure -->

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

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

Comments

[Mastrix 0160]

Попробуй использовать картинку как бекграунд - конечно же если картинка имеет области которые можно обрезать.
И https://github.com/scottjehl/picturefill/

Для респонсив картинки проще сделать так
Задать контейнеру картинки max-width / создать контейнер если нету ну или использовать грид как ограничитель
у самого контейнера и картинки высота авто
img{
max-width: 100%;
height: auto;
}

или искать что-то в стиле image aspect ratio

[Михаил Плюснин]

для меня важно не как подогнать картинку, а как ее на лету сжать с 1мб, до ~20-50кб

Answer 1

[Андрей ХАН]

Если уж совсем извратиться, то единственный выход, загружать картинки ajax запросом. Только оно надо ?