Aspect ratio experiment

by ShaCP

HTML

<!-- <div class="container">
  <div class="icon">
    <img class="aspect-ratio-width-to-height-1-to-1" src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'&gt;&lt;/svg&gt;">
    <div class="icon__graphic icon__graphic_facebook">
    </div>
  </div>
  <p class="text">Something something</p>
</div> -->

<div class="container">
  <img class="icon__graphic icon__graphic_facebook" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB3aWR0aD0iMTc5MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTU3OSAxMjhxMzUgMCA2MCAyNXQyNSA2MHYxMzY2cTAgMzUtMjUgNjB0LTYwIDI1aC0zOTF2LTU5NWgxOTlsMzAtMjMyaC0yMjl2LTE0OHEwLTU2IDIzLjUtODR0OTEuNS0yOGwxMjItMXYtMjA3cS02My05LTE3OC05LTEzNiAwLTIxNy41IDgwdC04MS41IDIyNnYxNzFoLTIwMHYyMzJoMjAwdjU5NWgtNzM1cS0zNSAwLTYwLTI1dC0yNS02MHYtMTM2NnEwLTM1IDI1LTYwdDYwLTI1aDEzNjZ6Ii8+PC9zdmc+">
<p class="text">Something something</p>
</div>

CSS

.icon {
  position: relative;
}

.icon__graphic {
  background-repeat: no-repeat; 
  background-size:contain;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  height: 100px;
  border: 1px solid lightgray;
  display: flex;
}

.text {
  display: block;
}

.aspect-ratio-width-to-height-1-to-1 {
  height: 100%;
  width: auto;
}

.icon__graphic_facebook {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB3aWR0aD0iMTc5MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTU3OSAxMjhxMzUgMCA2MCAyNXQyNSA2MHYxMzY2cTAgMzUtMjUgNjB0LTYwIDI1aC0zOTF2LTU5NWgxOTlsMzAtMjMyaC0yMjl2LTE0OHEwLTU2IDIzLjUtODR0OTEuNS0yOGwxMjItMXYtMjA3cS02My05LTE3OC05LTEzNiAwLTIxNy41IDgwdC04MS41IDIyNnYxNzFoLTIwMHYyMzJoMjAwdjU5NWgtNzM1cS0zNSAwLTYwLTI1dC0yNS02MHYtMTM2NnEwLTM1IDI1LTYwdDYwLTI1aDEzNjZ6Ii8+PC9zdmc+");
}