JSFiddle - React, Tailwind, and code Playground

HTML

<label>Testaa keskittämisiä venyttämällä tätä näkymää</label>

<label>Iso kuva (alkuperäinen)</label>
<img src="http://www.tsfysiikka.com/header.jpg" class="kuva" />
<label>Pieni kuva (pienennetty 200px leveäksi)</label>
<img src="http://www.tsfysiikka.com/header.jpg" class="kuva pieni" />
<label>Pieni Kuva on keskittynyt alla olevan divin sisällä´oikein, koska div on vain 400px leveä, ja kuva 200px</label>
<div class="sisalto">
    <img  src="http://www.tsfysiikka.com/header.jpg" class="kuva pieni" />
</div>
<label>Rikottu aspect ratio</label>
<img  src="http://www.tsfysiikka.com/header.jpg" class="rikottu" />

CSS

.kuva {
    display:block;
    margin: 0 auto;
}

.sisalto
{
    width:400px;
    display:block;
}

.rikottu {
     height:100px;
     width:200px;
}


.pieni {
    width:200px;
}

label {
     padding-bottom:20px; 
     display:block;
}