I've the following markup for a page which is mobile ready:
<section> <div class="cover-section"> <img src="img/central-park.jpg" alt="" style="width:100%" class="hoverZoomLink"> </div> <div class="logo-section"> <div class="container postLeft hiddenClass visibleClass animated fadeInLeft"> <img src="img/logos/instagram.png" alt=""> </div> </div> </section>
The problem is, since I provided
width:100% for the
imgin the mobile view, the whole image is appeared to be proportionate and as a result, very small. (Since this image is very wide).
Is there any way that I can display the image with a
min-height:300px without adding the image as a background and make it as
cover ? Because the image is being generated dynamically in which case allocating it to a particular css class wouldn't be easy.