Question

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

@KafkaListener(topics = "${spring.kafka.out-topic}")
public void processSrpResults(MessageResult result) {

而css是：

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>

}

Answer 1

如果您要分配height和width，请使用quote_box和width，从height移除max-width和max-height喜欢以下。

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

不使用bootstrap工作代码段

#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 link with bootstrap

边框和图像同时响应

1 个答案: