I want to fit an image with his parent dimensions. I don't want to use the image as background because is not clearly for google whether the image is using for styling or for content propose.
Anyway, i found object-fit and seems to be what I need.
My big problem now is that object-fit and hover doesn't work together as I expected.
Here is my code:
<div>
<img src="http://cdn2.hubspot.net/hub/53/file-385992610-jpg/html-code.jpg" />
</div>
<style>
div{
width:200px;
height:100px;
overflow:hidden;
}
div img{
width:100%;
height:100%;
object-fit:cover;
opacity:0.5;
}
div img:hover{
opacity:1;
}
</style>
And here is my fiddle:
Hovering several times you will see a distortion of image. I have tested in firefox and chrome. In chrome there is no problem, but in firefox it is.
