边框和图像同时响应

Question

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

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>

而css是：

#quote_box{
background-image: url('parchment.jpg');
border: solid black;
border-radius:5px;
height:400px;
width:300px;
background-size:cover;
background-repeat: no-repeat;
box-shadow:20px 20px 10px;
display: block;

}

#quote {
margin:10%;
text-align:center;
font-size: 22px;
font-weight: bold;
font-family:Georgia;
color: black;

}

Answer 1

如果您想分配width 和height，只需从quote_box 中删除height 和width，然后使用max-width 和max-height，如下所示。

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

不使用 bootstrap 工作 sn-p

#quote_box {
  background-image: url('http://lorempixel.com/400/200/sports/1');
  border: solid black;
  border-radius: 5px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  /* Add this  and remove height and width */
  box-shadow: 20px 20px 10px;
  display: block;
}

#quote {
  margin: 10%;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  font-family: Georgia;
  color: black;
}

<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>

使用 Bootstrap，您必须使用一些引导类，例如跟随 fiddle

fiddle link with bootstrap