[{"data":1,"prerenderedAt":122},["ShallowReactive",2],{"project-36310980":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":15,"aspects":33,"strip":34,"post_text":36,"what":37,"said":58,"maker_in_thread":76,"shape":78,"grid":81,"attempts":85,"same_week":86,"maker_shows":15,"maker_hidden":115,"reader_version":116,"card":117},"36310980","Frameright React image display control","React\u002Fweb component for responsive images on steroids","title","Show HN: React\u002Fweb component for responsive images on steroids","https:\u002F\u002Freact.frameright.io\u002F","react.frameright.io","lourot",1686667564,2023,17,2,1816,3109,59,"shown","languages","ui component library","library",[24,25,26,27,28],"react","responsive images","image cropping","web component","iptc image regions","quiet",null,{"positive":15,"neutral":32,"mixed":32,"critical":32},0,{},[35,35],5,"Hey, OP here. This is hopefully interesting, especially for front-end developers. Nowadays images (JPEG, PNG, ...) can contain so-called Image Regions in their metadata [1] like cropping regions or regions of interest. So we've created a React component [2] that responsively displays the \"best\" cropping region, i.e. the one with the ratio closest to the current `\u003Cimg>` element size. If you don't use React we have also built a web component. [3] With this approach you no longer have to worry about whether the size of your assets will match the ratio of their containers on all devices. The displ",{"problem":38,"audience":44,"pricing":30,"motivation":30,"time_to_build":30,"stack":48,"openness":57,"stage":57,"team_size":57},{"value":39,"source":40,"evidence":41},"Images need different crops for different container ratios; hard crops are hard to maintain","maker",[42],{"id":43},"post",{"value":45,"source":40,"evidence":46},"front-end developers",[47],{"id":43},[49,53],{"value":50,"source":40,"evidence":51},"React",[52],{"id":43},{"value":54,"source":40,"evidence":55},"Web components",[56],{"id":43},"unknown",{"praise":59,"objections":72,"requests":73,"questions":74,"alternatives":75},[60],{"value":61,"source":62,"evidence":63},"Commenters liked the project and shared it in a list","commenter",[64,68],{"id":65,"by":66,"text":67},"36311845","brillout","Very nice. Added to https:\u002F\u002Fgithub.com\u002Fbrillout\u002Fawesome-react-components.",{"id":69,"by":70,"text":71},"36311579","rednix","very cool stuff!",[],[],[],[],{"comments":32,"answered":32,"key":77},[],{"commenters":15,"max_depth":79,"maker_replies":32,"first_comment_mins":80,"lifespan_hours":79},1,36,[82,84],[65,32,35,83,66,32],"project\u002Fpositive\u002Fnone",[69,79,35,83,70,32],[],[87,92,97,102,106,110],{"id":88,"name":89,"points":90,"category":91},"36296695","Non.io",1943,"consumer_social",{"id":93,"name":94,"points":95,"category":96},"36295227","Dimension Hopper",395,"games",{"id":98,"name":99,"points":100,"category":101},"36243926","databasediagram.com",262,"dev_tools",{"id":103,"name":104,"points":105,"category":91},"36299904","FlingUp",260,{"id":107,"name":108,"points":109,"category":20},"36244886","Tremor 3.0",227,{"id":111,"name":112,"points":113,"category":114},"36301337","Zsync",207,"web_saas",false,"v2",{"id":118,"name":5,"line":6,"ai":115,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":30,"top":18,"kw":119,"maker":11,"domain":10,"tier":19,"attempts":32,"strip":120,"url":9,"mix":121,"praise":61,"objection":-1,"sub":21},36310980,[24,25,26,27,28],"55",[15,32,32,32],1794036636870]