Before (On my display with a resolution of 1024px)
https://i.sstatic.net/NPpK9.png
After (On a different resolution - for example, screen width:1500px)
https://i.sstatic.net/9dGTF.png
#quotes_div img{
width: 100vh;
margin-left: 3%;
margin-top: 3%;
}
#quotes_div{
position: relative;
}
#quotes_div #img{
width: 82.5%;
height: 38.5vh;
background: red;
}<div id="quotes_div">
<h3>My favorite quotes that inspire me</h3>
<i class="fa fa-quote-left fa-2x fa-inverse" aria-hidden="true"></i>
<i class="fa fa-quote-right fa-2x fa-inverse" aria-hidden="true"></i>
<p>Even an impossible dream can lead to action</p>
<div id="img">
<img src="assets/fielding.jpg" alt="Field">
</div>
</div>I want picture Nr.1 and its "border" to have the same resolution. + I apologize for the text formatting on stackoverflow)