i have 3 elements want keep in same place image responsively shrinks.
.main { position: relative; } .container { display: inline; } .point { display: inline; position: absolute; max-width: 15%; margin-right: 10px; padding: 3px 7px 3px 5px; font-size: 12px; font-weight: bold; color: #fff; background: #ff0000; border-radius(5px); box-shadow(1px 2px 5px rgba(0,0,0,0.5)); } .one { top: 40%; left: 10%; } .two { top: 50%; left: 40%; } .three { top: 75%; left: 20%; }<div class="main"> <div class="container"> <div class="point one">1</div> <div class="point two">2</div> <div class="point three">3</div> </div> <img src="https://i.ytimg.com/vi/m5shkcxkdgs/hqdefault.jpg" alt="husky"> </div>
i believe want scale image scales down responsively, achieves effect.
.wrapper { position: relative; display: inline-block; } .wrapper img { max-width: 100%; } .point { position: absolute; max-width: 15%; margin-right: 10px; padding: 3px 7px 3px 5px; font-size: 12px; font-weight: bold; color: #fff; background: #ff0000; border-radius(5px); box-shadow(1px 2px 5px rgba(0,0,0,0.5)); } .one { top: 40%; left: 10%; } .two { top: 50%; left: 40%; } .three { top: 75%; left: 20%; }<div class="main"> <span class="wrapper"> <img src="https://i.ytimg.com/vi/m5shkcxkdgs/hqdefault.jpg" alt="husky"> <span class="point one">1</span> <span class="point two">2</span> <span class="point three">3</span> </span> </div>i using inline-block automatically allow wrapper element "wrap" around image no matter size image is. set max-width: 100% turn image responsive image (well, scales down when window resizes). since points %-based, stay in right position image scales down.
✔ no requirement have fixed width , height image/wrapper, it's responsive
✔ less html required
✔ works on pretty browser besides unsupported old ones
this nice trick i've used things "banners" across images , other techniques position things on images effects.
Comments
Post a Comment