FlexibleImage.vue

<template lang="pug">
.flexible-image(:style="{width: width + unit, height: height + unit}")
  img.image(:src="imageUrl" :style="{width: fixedWidth + unit, height: fixedHidth + unit}")
</template>

<script lang="coffee">
export default
  props:
    imageUrl:
      type: String
      required: true
    width:
      type: Number
      require: true
      coerce: (val) -> parseFloat(val)
    height:
      type: Number
      required: true
      coerce: (val) -> parseFloat(val)
    unit:
      type: String
      required: false
      default: 'px'
  computed:
    aspectRatio: -> @width / @height
    imageAspectRatio: -> @image.width / @image.height
    image: ->
      image = new Image()
      image.src = @imageUrl
      image
    fixedWidth: ->
      if @aspectRatio < @imageAspectRatio then null else @width
    fixedHidth: ->
      if @aspectRatio < @imageAspectRatio then @height else null
</script>

<style lang="scss" scoped>
.flexible-image {
  position: relative;
  overflow: hidden;
  > .image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>