css - Hide bottom 20px of an image, scale down if necessary -
i run photo blog , every image file publish has 20px-high "footer" @ bottom copyright information. now, need in case saves of hotlinks image; don't need footers visible on own site, hide them covering bottom 20px of every photo white div this:
<style> .photo_container { position: relative; } .footer_hide { position: absolute; bottom: 0; left: 0; height: 20px; width: 100%; background: #fff; } </style> <div class="photo_container"> <img src="photo.jpg"> <div class="footer_hide"></div> </div>
this works images displayed @ 100% of size, in attempt make site mobile-friendly, scale them down fit smaller viewports with:
.photo_container img { display: inline-block; height: auto; max-width: 100%; }
obviously, "footer hider" stays 20px-high no matter what. there pure-css way of scaling down accordingly (or maybe different approach i'm trying achieve here), assuming dimensions of image unknown/variable?
yes. flexbox prefect this, check out in mobile view , desktop view, good, works without media queries. can expand codepen see effect. think of xyz class footer.
.xyz { width: 70%; box-shadow: 0 0 30px; text-align:center; -webkit-flex: 9 0 0; flex: 9 0 0; }
link codepen
http://codepen.io/damianocel/pen/xmxmqe
you have change code quite bit best solution think.
Comments
Post a Comment