image-fit 2

Image fits inside parent div

by bseib

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<body style="padding: 1em">

  <main id="app">
  
    <div class="outer-container">
      <div class="centered2">
        <img src="https://i.imgur.com/ozEaj1Z.png" class="fit-image">
        <div>overlay</div>
      </div>
    </div>

    <div class="outer-container" style="margin-top: 1em;">
      <div v-if="isShown" class="centered2">
        <img src="https://i.imgur.com/ozEaj1Z.png" class="fit-image">
        <div>overlay</div>
      </div>
    </div>

    <button @click="toggle" style="margin-top: 2em;">Toggle</button>
    <div> isShown = {{isShown}}</div>

  </main>

</body>

CSS

* {
  box-sizing: border-box;
}

.outer-container {
  height: 200px;
  outline: 1px solid red;
}

.centered2 {
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}

.centered2 * {
  grid-column: 1;
  grid-row: 1;
}

.fit-image {
  height: 100%;
  object-fit: contain;
}

JavaScript

let app = Vue.createApp({
    data() {
        return {
            isShown: false
        }
    },
    methods: {
        toggle() {
        		this.isShown = !this.isShown
        },
    }
});

app.mount('#app');