如何设置图像的自适应背景？

Question

  

之前（在我的屏幕分辨率（1024px）上）

  

之后（另一种结果 - 例如屏幕宽度：1500px）

#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 to which I adhere</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>

我需要图片Nr.1和“border”（背景）将具有相同的分辨率。 +对不起（我不是在stackoverflow上格式化文本）

Answer 1

要使图像响应，并保持在红色边框内，请勿强制使用特定高度，只需将容器和图像指定为100％，并在图像周围添加填充以显示红色背景。

查看此示例现在可以使用，根据需要添加或删除填充：

#quotes_div img{
	width: 100%;
}
#quotes_div{
position: relative;
}
#quotes_div #img{
	width: 100%;
	background: red;
  padding: 1em;
}

<div id="quotes_div">
					<h3>My favorite quotes to which I adhere</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="http://placehold.it/1000x350" alt="Field">
					</div>
				</div>