Keep image original size inside smaller div

If you specify a 100% size for your image. Your image will then take 100% of its container.

The thing you want is keeping your file at its original size, so do not specify any size for your image.

overflow:hidden is the key to show only a part of your image.

If you want to always have the center of your image visible, you should take a look at this CSS3 property transform:translate(-50%,-50%) with a proper positioning.

Take a look at this jsfiddle and tell me if it can help you.

---

Edit: With 2020 modern browser, it may be useful to take a look at the CSS object-fit property. In particular object-fit: cover;. Take a look at this updated jsfiddle.