how to make a stretched image fit a specific height
<p>I have an image which is stretched horizontally but when stretched it looks like this:</p>

<p><a href="https://i.stack.imgur.com/QtsjI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QtsjI.jpg" alt="enter image description here"></a></p>

<p>How do I retain its original height while cropping it. I don't want to use <code>object-fit contain</code> cause it causes so many images to be cropped which doesn't look good.</p>

<p>This is my markup, and the image below, and it responds well on mobile but on wider screens it looks cropped to fit</p>

<pre><code> &lt;img  class="img-responsive pad tyi abn"  src="&lt;?php echo $er ?&gt;" style="   display: flex; flex-wrap: wrap; top:-1000% !important; background-size:cover   !important;   position:center center;   background-repeat:no-repeat;  max-height:710px !important;  vertical-align:baseline;  -webkit-filter: brightness(100%); -moz-filter:  brightness(100%); -ms-filter: brightness(100%) ; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');  min-width:100% !important; width:100% !important; margin:0px !important;  overflow:hidden;" alt="Photo"&gt; [The photo below][1]
</code></pre>