HTML CSS examples for CSS Widget:Header
Match screen size to with header picture
<html lang="en"> <head> <style> body {<!-- w ww .j a v a2 s . c o m--> margin: 0; background: pink; } header { padding: .5vw; font-size: 0; display: -ms-flexbox; -ms-flex-wrap: wrap; -ms-flex-direction: column; -webkit-flex-flow: row wrap; flex-flow: row wrap; display: -webkit-box; display: flex; } header div { -webkit-box-flex: auto; -ms-flex: auto; flex: auto; width: 200px; margin: .5vw; } header div img { width: 100%; height: auto; } </style> </head> <body translate="no"> <header> <div> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt> </div> <div> <img src="https://www.java2s.com/style/demo/Safari.png" alt> </div> <div> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt> </div> <div> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt> </div> <div> <img src="https://www.java2s.com/style/demo/Opera.png" alt> </div> </header> </body> </html>