Адаптивные изображения с помощью javascript

Я думаю с вопросом адаптивных изображений все верстальщики часто встречались. Большинство статей, которые я прочитал, мне не подошли. В каждом случае были свои минусы. Приходилось писать дополнительные стили css или загружать разные изображения на определенных разрешениях. Почему-то универсального метода я не нашел. Это было похоже на то, как сделать блоки одинаковой высоты. Вроде бы можно сделать это несколькими способами, но лучший способ — это js.

Да, изображения. С панели администратора постоянно заливались изображения не той ширины или высоты. И в на страницах смотрелось очень криво. А если одно и тоже изображение будет на разных страницах и в разных блоках.

В общем я решил эту задачу с помощью доброго старого js.

 .bock_img {
        border: 1px solid #000;
        height: 200px;
        width:35%;
        overflow: hidden;
        text-align: center;
        line-height: 197px;
        margin: 5px;
        display: inline-block;
        position: relative;
    }
    .bock_img > img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform:translate(-50%, -50%);
        display: inline-block;
        max-width: 100%;
        max-height: 100%;
    }

  $(document).ready(function () {
        /*=============================адаптивное изображение===========*/
        $(".bock_img").each(function(){
            var adapBlock = $(this);
            var adapImg = adapBlock.find("img");
            if(adapBlock.height() > adapImg.height()){
                adapImg.css("max-width", "none")
            }
            else if(adapBlock.width() > adapImg.width()){
                adapImg.css("max-height", "none")
            }
        })
    });

Автор: рыцарь со стволом

Источник ^[1]