<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .wrapper { display: inline-block; vertical-align: top; margin: 20px; } .outer { height: 250px; width: 200px; border: 10px solid #ddd; } .inner { overflow: hidden; background: yellow; } .test1 { width: 100px; height: 150px; } .test2 { width: 150px; height: 100px; } </style> </head> <body> <div class="wrapper"> <div class="outer"> <img class="inner test1" src="foo"> </div> </div> <div class="wrapper"> <div class="outer"> <img class="inner test1" src="foo" dir="rtl"> </div> </div> <br> <div class="wrapper"> <div class="outer"> <img class="inner test2" src="foo"> </div> </div> <div class="wrapper"> <div class="outer"> <img class="inner test2" src="foo" dir="rtl"> </div> </div> </body> </html>