Last post Dec 25, 2018 04:10 AM by Ackerly Xu
Dec 24, 2018 12:41 PM|InspiredJide|LINK
I am building a website builder framework like wix.com or wordpress. So right now I have created Db structure for pages. But I am having a problem with images. how to create size set for different screen size so when the user uploads an image. I can break
down the images into different sizes.
Firstly I need advice on the various size (I mean dimension ) set that I need to put into consideration. also the weight of the images.
I know that this html tag is going to be useful <img srcset="">
Dec 24, 2018 06:04 PM|bruce (sqlwork.com)|LINK
there are no fixed screen widths. but just like bootstrap you can pick a fixed set of breakpoints, and remap the image to these sizes using the image library of your choice. alternately your user could pick these sizes on image upload.
Dec 25, 2018 04:10 AM|Ackerly Xu|LINK
If you want responsive images, you could consider picture tag.
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
It will choose the most consistent image according to the media property of source element.
If no one is selected, the img element will be chosen.
For more information, you could refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture