Html 边界和图像同时响应

所以我在一个div框里有一张照片。图像有.img响应，但是如果我想使边框也响应，那么当我缩小屏幕尺寸时，边框和图像会按比例一起收缩，该怎么办。此外，框内的文本也应相应收缩。如果有一个引导方法可以做到这一点。请也告诉我

div id="quote_box">
    <p id="quote">
        This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
    </p>
</div>

---

}

如果您想分配

宽度和
高度，只需从
quote\u框中删除
高度和
宽度，然后使用
最大宽度和
最大高度，如下所示

#quote_box{
   max-width:300px;
   max-height:400px;
}

不使用引导工作代码段


#报价箱{
背景图像：url（'http://lorempixel.com/400/200/sports/1');
边框：纯黑；
边界半径：5px；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
/*添加此项并删除高度和宽度*/
盒影：20px 20px 10px；
显示：块；
}
#引述{
利润率：10%；
文本对齐：居中；
字体大小：22px；
字体大小：粗体；
字体系列：格鲁吉亚；
颜色：黑色；
}


这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。这是一段。

您的.img响应功能在哪里？您需要这样的功能吗？你在用引导程序吗？这很好。非常感谢。有一件事，如果缩小到一定的尺寸，背景中的图像似乎会受到一些影响，尽管我在背景中的图像是对称的精灵类型。有什么想法吗？图像会和纵横比一起出现，你们使用的是背景尺寸：封面，所以图像会用它的纵横比占据整个div。
#quote_box{
   max-width:300px;
   max-height:400px;
}