JSFiddle - React, Tailwind, and code Playground

by thindery

HTML

<p>These Images only have a width parameter set in the s7 image request with a max height set via CSS</p>
<p>Each image is the same size</p> <div class="restrict">
    <img src="https://papermusepress.scene7.com/is/image/papermusepress?layer=0&src=fxg{papermusepress/STA_PNP4_014_00?$productPreset$&imageres=140&wid=535}&scl=1&fmt=png-alpha&qlt=90&op_usm=0.3,1&cropN=0,0.19,1,.81&extend=10,10,10,10&effect=-1&blendMode=mult&op_grow=3&op_blur=4&color=0,0,0,120" />
    &nbsp;&nbsp;&nbsp;
    <img src="https://papermusepress.scene7.com/is/image/papermusepress?layer=0&src=fxg{papermusepress/STA_NP4IN_014_00?$productPreset$&imageres=140&wid=535}&scl=1&fmt=png-alpha&qlt=90&op_usm=0.3,1&extend=10,10,10,10&effect=-1&blendMode=mult&op_grow=3&op_blur=4&color=0,0,0,120" />    
</div>
<p>Below images have width and height parameters on the S7 request as well as a max height in the cSS</p>
<p>Each image is a different size</p>

<div class="norestrict">
        <img src="https://papermusepress.scene7.com/is/image/papermusepress?layer=0&src=fxg{papermusepress/STA_PNP4_014_00?$productPreset$&imageres=140&wid=535&hei=473}&scl=1&fmt=png-alpha&qlt=90&op_usm=0.3,1&cropN=0,0.19,1,.81&extend=10,10,10,10&effect=-1&blendMode=mult&op_grow=3&op_blur=4&color=0,0,0,120" />
    &nbsp;&nbsp;&nbsp;
    <img src="https://papermusepress.scene7.com/is/image/papermusepress?layer=0&src=fxg{papermusepress/STA_NP4IN_014_00?$productPreset$&imageres=140&wid=535&hei=473}&scl=1&fmt=png-alpha&qlt=90&op_usm=0.3,1&extend=10,10,10,10&effect=-1&blendMode=mult&op_grow=3&op_blur=4&color=0,0,0,120" />    
</div>

<p>Below images have width and height parameters on the S7 request and no css max info</p>
<p>Each image is a different size</p>

<div>
        <img...

CSS

.restrict > img {
    max-height: 400px;
}

.norestrict > img {
       max-height: 400px; 
}