宽度与高度

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

有多种选择可以做到这一点。

看看

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

您不需要 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>

结果

宽度与高度

Width versus Height

javascript

css

height

width

vue.js