JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foto-resp">
    
    <img id="myimg" src="http://thumb1.shutterstock.com/display_pic_with_logo/152617/110688164/stock-vector-many-colored-puzzle-pattern-removable-pieces-vector-illustration-110688164.jpg" style="max-width: 450px">            </img>
</div>

CSS

.foto-resp {    
    position: relative;
}
.foto-resp > img {
    position: absolute;
    margin: auto;
    max-width: 450px;
    width:95%;
}

.foto-resp:before {
    content: "";
    border: 1px solid rgba(150,150,150,0.4);
    display: block;
    position: absolute;
    width: 100%;
    top: 250px;
    left: 0;
}

.foto-resp > hr {
    position:absolute;
    width: 100%;
    top: 50%;
    border: 1px solid rgba(150,150,150,0.4);
}