Base Creative Pattern Lab

Portfolio Cover

HTML

									
										<img sizes="(min-width: 60em) 300px, (min-width: 48em) 33vw, (min-width: 20em) 50vw, 100vw" srcset="//placehold.it/250x175/fff 250w, //placehold.it/400x300/fff 400w, //placehold.it/600x400/fff 600w" alt="portfolio item" />

Portfolio Primary

HTML

									
										<picture>
	<source media="(min-width: 40em)" srcset="//placehold.it/250x100/fff 250w, //placehold.it/400x166/fff 400w, //placehold.it/600x250/fff 600w, //placehold.it/1000x400/fff 1000w" alt="portfolio thing" />
	<img sizes="(min-width: 40em) 90vw, 100vw" srcset="//placehold.it/250x125/fff 250w, //placehold.it/400x200/fff 400w, //placehold.it/600x300/fff 600w" alt="portfolio thing" />
</picture>

Portfolio Related

HTML

									
										<img sizes="(min-width: 60em) 200px, (min-width: 40em) 20vw, (min-width: 20em) 33vw, 100vw" srcset="//placehold.it/250x125 250w, //placehold.it/400x200 400w, //placehold.it/600x300 600w" alt="portfolio item" />

Portfolio Secondary

HTML

									
										<img sizes="(min-width: 60em) 300px, (min-width: 48em) 33vw, (min-width: 40em) 50vw, 100vw" srcset="//placehold.it/250x150/fff 250w, //placehold.it/400x250/fff 400w, //placehold.it/600x375/fff 600w" />