To achieve this effect using the img tag, you can utilize the following two codes:
object-fit:cover;
object-position:50% 50%;
These codes function similarly to background-size and background-position properties.
Here is an example of how it can be implemented in code:
html,body {
width: 100%;
height: 100%
}
img {
width: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
object-position: 50% 50%;
float:left;
}
div {
width: 100%;
height: 100%;
background: #222;
display:flex;
color:#fff;
align-items:center;
justify-content:center;
}
<img src="https://www.rafaeldejongh.com/wp-content/uploads/2016/12/GlitchSkull1.jpg" alt="Rafael De Jongh - Glitch Skull"/>
<div>
<p>Other Content</p>
</div>
You can also view this implementation on JSFiddle
If you prefer a full fluid background image that covers 100% of the viewport's width and height, you can achieve that with the following code:
html,body {
width:100%;
height:100%
}
#img {
width:100%;
height:100%;
max-width:100%;
max-height:100%;
background-image:url(https://www.rafaeldejongh.com/wp-content/uploads/2016/12/GlitchSkull1.jpg);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
float:left;
display:inline-block;
}
#content {
width:100%;
height:100%;
background: #222;
display:flex;
color:#fff;
align-items:center;
justify-content:center;
}
<div id="img"></div>
<div id="content"><p>Other Content</p></div>
Also available on JSFiddle
If you have any more questions, feel free to ask!