Image position equivalent to background position - html

Question

I am working on a website and I want to style an image like you style a background with background-position: center. Is there an equivalent to this for a regular image?
Thanks in advance,
Luuk
EDIT:
The image is responsive and contained in a container.
CSS:
.img-container {
max-height: 300px;
overflow: hidden;
}
.img-container img {
max-height: 100%;
max-width: 100%;
}

Answer 1

I would do something like this to position the image centered.
.img-container {
display: flex;
justify-content: center;
align-items: center;
max-height: 300px;
overflow: hidden;
}
.img-container img {
max-height: 100%;
max-width: 100%;
}

Answer 2

You could go for display flex, but the support for IE is quite disastrous. If you care about browser support (which you should) go for the below example instead.
<div class="list">
<div class="item">
<img src="https://unsplash.it/50/40" alt="">
</div>
<div class="item">
<img src="https://unsplash.it/50/60" alt="">
</div>
<div class="item">
<img src="https://unsplash.it/50/30" alt="">
</div>
<div class="item">
<img src="https://unsplash.it/50" alt="">
</div>
</div>
Sass:
.list {
text-align: center;
}
.item {
position: relative;
display: inline-block;
vertical-align: top;
height: 5rem;
width: 5rem;
background: red;
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
Make sure to add the prefixes for the transform attribute as well.
Fiddle: https://jsfiddle.net/k433b6up/

Answer 3

Your desired result isn't exactly clear, but here are some options for two different interpretations:
Changing the display property of the image and setting the text alignment to its container will maintain it's native height and width while centering it in the container:
.img-container {
max-height: 300px;
overflow: hidden;
text-align: center;
}
.img-container img {
display: inline-block;
max-height: 100%;
max-width: 100%;
}
Demo: https://jsfiddle.net/5suo8tbw/
If you're trying to achieve a background fill with an img element you should consider using the object-fit: cover attribute. This will always fill your container's dimensions, maintain the image's aspect ratio, and center it in the container.
.img-container {
max-height: 300px;
overflow: hidden;
}
.img-container img {
object-fit: cover;
height: 100%;
width: 100%;
}
Demo: https://jsfiddle.net/5suo8tbw/1/
Here's a link to the spec: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
For cross browser support, check out the polyfill: https://github.com/anselmh/object-fit

Answer 4

object-fit and object-position properties of an img are equivalent to background-size and background-position properties of a block element with background-image, respectively. In the following snippet, please note that the container size is 300px * 300px while the image size is 500px * 300px.
.imageContainer {
margin: 15px;
width: 300px;
height: 300px;
border: 5px solid lightgreen;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
<div class='imageContainer'>
<img class='image'src='https://picsum.photos/500/300' alt='lorem picsum' />
<div>