Ширина против высоты

Question

У меня есть картинка 225x322, и она в этом делении (фон)

Html:

<div class="image-info">

        <div class="image-anime"   :style="[window]" ref="image-anime"  style="background: url('<?php echo $itemanime['poster']; ?>')  no-repeat;">
        </div>
    </div>  

Моя цель сделать - ширина зависит по высоте

Нахожу соотношение сторон = 322/225 = 1.43111111111

Это мой js код:

var app3 = new Vue({
    el: '#image-anime',
    data: function(){
        return{
            window: {
                height: null,
                width: null,
            }
        }
    },
    mounted() {
        this.$nextTick(function() {
                window.addEventListener('resize', this.getWindowWidth());
                window.addEventListener('resize', this.getWindowHeight());
        })
    },

    computed: {
        windowHeight() {
                return this.getWindowHeight();
        },
        windowWidth() {
                return this.getWindowWidth();
        }
    },

    methods: {
        getWindowWidth(event) {
                console.log('here')
                return document.documentElement.clientWidth;
        },

        getWindowHeight(event) {
                return document.documentElement.clientHeight;
        }
    },
    methods: {
        returnnewvalue(event) {
            this.windowHeight = this.windowWidth * 1.41
        },
        returnvalue2(event) {
           return this.windowHeight
        }
    }
})

Мой css :

.image-info{
    display: flex; 
    flex-direction: row;
    justify-content: space-between;

    height: 400px;
    width: 100%; 

    margin-bottom: 30px; 
}
.image-anime{
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    height: 400px;
    width: 280px;

    background-size: 280px 400px !important;


}

Как это сделать без тега?

Answer 1

есть несколько вариантов сделать это.

взгляните на

Как мне автоматически изменить размер изображения, чтобы он соответствовал контейнеру 'div'?

вам не нужно javascript, чтобы сделать это. взгляните на мой код

.image{
    height: 400px;
    background-image: url("https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png");
    background-repeat: no-repeat;
    background-size: contain;
}

<div class="image">
</div>

РЕЗУЛЬТАТ