JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<h2>Always 100% width, no proportions</h2>
<img class="w1" src="http://sports.cbsimg.net/u/photos/football/nfl/img24697851.jpg" />
<h2>Always 100% width, with proportions</h2>
<img class="w2" src="http://sports.cbsimg.net/u/photos/football/nfl/img24697851.jpg" />
<h2>Use max-width, with proportions</h2>
<img class="w3" src="http://sports.cbsimg.net/u/photos/football/nfl/img24697851.jpg" />

CSS

.w1 {
    width: 100%;
    max-height: 300px;
}
.w2 {
    width: 100%;
}
.w3 {
    display: block;
    width: 100%;
    margin: 0 auto;
    max-width: 640px;
}