Responsive Images - Align Left, Centered, Right showing with 17%, 25%, 50%, 75%

After the view port gets below 640 pixels, the images align above the text.
More info on :
- USWDS Grid System: https://designsystem.digital.gov/utilities/layout-grid/
- USWDS Float: https://designsystem.digital.gov/utilities/float/
- USWDS Flex: https://designsystem.digital.gov/utilities/flex/
  - To have the image fill the width of the viewport
  - To align the item in the center of the page : https://designsystem.digital.gov/utilities/flex/#utility-flex-align
  - Justification (for aligning items in the center of the screen): https://designsystem.digital.gov/utilities/flex/
- USWDS Paragraph styles (for keeping the image and the caption center aligned in it's viewport) https://designsystem.digital.gov/utilities/paragraph-styles/#text-align

Here are the options that are available:

Column indicator	1	2	3	4	5	6	7	8	9	10	11	12
Page width %	8%	17%	25%	33%	42%	50%	58%	67%	75%	83%	92%	100%

Float left examples	Float center examples	Float right examples
Image takes up 17% of the screen until viewport width gets below 768 pixels. Sample code: Replace the "2" with one of the numbers column indicators to get other width values `<div class="tablet:grid-col-2 float-left padding-right-2 text-center">` `<div class="display-flex flex-column"> <img src="illustrated-history-nlm-published-2017-demo.png" alt="Illustrated History of NLM" /> </div>` `<p class="margin-top-0">Images of America: US National Library of Medicine Cover. Lets add more text.</p>` `</div>`	Image takes up 17% of the screen until viewport width gets below 768 pixels. Sample code: Replace the "2" with one of the numbers column indicators to get other width values `<div class="display-flex flex-column flex-align-center">` `<div class="tablet:grid-col-2 text-center">` `<div class="display-flex flex-column"> <img src="/web/documentation/TemplateDocumentation/illustrated-history-nlm-published-2017-demo.png" alt="Illustrated History of NLM" /> </div>` `<p class="margin-top-0">Images of America: US National Library of Medicine Cover</p>` `</div>` `</div>`	Image takes up 17% of the screen until viewport width gets below 768 pixels. Sample code: Replace the "2" with one of the numbers column indicators to get other width values `<div class="tablet:grid-col-2 float-right padding-left-2 text-center">` `<div class="display-flex flex-column"> <img src="illustrated-history-nlm-published-2017-demo.png" alt="Illustrated History of NLM" /> </div>` `<p class="margin-top-0">Images of America: US National Library of Medicine Cover</p>` `</div>`
Image takes up 25% of the screen until viewport width gets below 768 pixels.	Image takes up 25% of the screen until viewport width gets below 768 pixels.	Image takes up 25% of the screen until viewport width gets below 768 pixels.
Image takes up 33% of the screen until viewport width gets below 768 pixels.	Image takes up 33% of the screen until viewport width gets below 768 pixels.	Image takes up 33% of the screen until viewport width gets below 768 pixels.
Image takes up 50% of the screen until viewport width gets below 768 pixels.	Image takes up 50% of the screen until viewport width gets below 768 pixels.	Image takes up 50% of the screen until viewport width gets below 768 pixels.
Image takes up 75% of the screen until viewport width gets below 768 pixels.	Image takes up 75% of the screen until viewport width gets below 768 pixels.	Image takes up 75% of the screen until viewport width gets below 768 pixels.

Left 17 percent

Images of America: US National Library of Medicine Cover. Lets add more text.

This week marks the publication of a new illustrated history of the National Library of Medicine. The book appears in the popular Images of America series by Arcadia Publishing, and was arranged through a public-private partnership with that publisher. Simultaneously, the complete book and original versions of the 170+ images, which appear in it in black and white, are archived and freely available in NLM Digital Collections. A hardback version of the book is available from booksellers.

On Thursday, July 13, 2017, beginning at 2:30 pm, the NLM’s History of Medicine Division will be holding a public symposium to mark the publication of Images of America: US National Library of Medicine and its availability via NLM Digital Collections. The program will be a part of the NLM History of Medicine Lecture Series and will take place in Lipsett Amphitheater in Building 10. All are warmly welcome, and if you cannot join us onsite, you can watch the proceedings via NIH Videocasting and participate in them via Twitter by following #NLMHistTalk.

Co-edited by Jeffrey S. Reznick, PhD, and Kenneth M. Koyle, chief and deputy chief of the NLM History of Medicine Division, Images of America: US National Library of Medicine was made possible through the collaborative research, writing, editing, and technical expertise of staff from across the Library, and many colleagues and friends.

Many individuals have written about the National Library of Medicine and its origins as the Library of the Office of the U.S. Army Surgeon General. However, this new book is unlike previous publications because it is intended for a general audience, and it illustrates the broad history of the Library from the early 19th century through the late 20th century through over 170 images from its own rich collections, along with a handful of other images from the collections of the National Archives, the National Museum of Health and Medicine, the Smithsonian Institution Archives, and the Rudolph Matas Library of the Health Sciences at Tulane University. The book reveals the work of generations of visionary leaders and dedicated individuals who experienced the American Civil War, the world wars, the Cold War, and the dawn of the Information Age.

Images of America: US National Library of Medicine is a welcome companion to Hidden Treasure: The National Library of Medicine, produced by the Library in 2011. We hope readers of all ages and backgrounds will appreciate this new broad history of the Library as much as we have appreciated crafting it and making it publicly available in cooperation with so many colleagues and friends here at the NLM and beyond. And we hope this book will inspire readers to learn more about the development of the Library and visit for a tour or conduct research in our world-renowned collections which span ten centuries and represent nearly every part of the globe.

As with Hidden Treasure, the Intramural Research Program of the US National Institutes of Health, National Library of Medicine, supported the collaborative research, writing, and editing of Images of America: US National Library of Medicine.