Width versus Height

Question

I have a picture 225x322,and it's in that division(background)

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>

My goal is to make - width depend on height

I find aspect ration = 322 / 225 = 1.43111111111

That's my js code:

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
        }
    }
})

My 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;


}

How to do that without tag?

score 1 · Accepted Answer · answered Apr 11 '20 at 12:03

1

there are multiple options to do this.

take a look at

How do I auto-resize an image to fit a 'div' container?

you do not need javascript to do this. take a look at my code

.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>

RESULT

answered Apr 11 '20 at 12:03

Stanley

2,434
18
28

Thank u very much,but i tested what u explained and revealed that my picture is not deformed due to php.But thank u a lot. You are the only one who tried to help me – Welisio Apr 11 '20 at 14:36
@Welisio i see. Glad i could help. If the problem is fixed. Please mark the question as answered! – Stanley Apr 11 '20 at 14:37

Width versus Height

1 Answers1