1.

What are different approaches to make an image responsive?

Answer»
  • Art direction - USING <picture> element the landscape image fully shown in desktop layout can be zoomed in with the main SUBJECT in focus for a portrait layout.
<picture> <source media="(min-width: 650px)" srcset="img_cup.jpg"> <img src="img_marsh.jpg" style="width:auto;"></picture>

Bigger Screen (>650px)

For any other screen

  • Resolution switching - Instead of zoom and crop the images can be scaled accordingly using vector graphics. Also, this can be further optimized to serve different pixel density screens as well. 

For example SVG

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" STROKE="green" stroke-width="4" fill="YELLOW" /></svg>


Discussion

No Comment Found

Related InterviewSolutions