| <!doctype html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="utf-8" /> |
| <title>img.weird-stretch</title> |
| <style> |
| body { |
| width: 400px; |
| margin: 0 auto; |
| } |
| .weird-stretch-container { |
| float: right; |
| width: 400px; |
| height: 250px; |
| display: -webkit-flex; |
| display: -ms-flexbox; |
| display: flex; |
| -webkit-box-align: center; |
| -webkit-align-items: center; |
| -ms-flex-align: center; |
| align-items: center; |
| -webkit-box-pack: center; |
| -webkit-justify-content: center; |
| -ms-flex-pack: center; |
| justify-content: center |
| } |
| |
| img.weird-stretch { |
| max-width: 100%; |
| max-height: 100% |
| } |
| </style> |
| </head> |
| |
| <body> |
| |
| <div class="weird-stretch-container"> |
| <img class="weird-stretch" alt="" src="resources/subjects_sm.png" width="100px" /> |
| </div> |
| |
| <div class="weird-stretch-container"> |
| <img class="weird-stretch" alt="" src="resources/subjects_sm.png" height="100px" /> |
| </div> |
| |
| <div class="weird-stretch-container"> |
| <img class="weird-stretch" alt="" src="resources/subjects_sm.png" width="132px" height="210px" /> |
| </div> |
| </body> |
| |
| </html> |
