Question

我有一个包含背景图像的DIV（.main）。 TOS文本覆盖背景图像。扩展浏览器窗口时，一切都很好，但是一旦将其缩小得太多，TOS中的文本就会溢出图像。

通过访问我的网站并调整窗口大小，您可以实时看到问题。 https://royalkingdom.net/store/

我已经尝试过使用填充，边距，最大高度和最大宽度。

/* Main column */
.main {
  flex:60%;
  height:940px;
  margin-bottom:10vh;
  padding-right:8%;
}
#bgimg {
 position: relative;
 height:100%;
 width:100%;
 background-image: url("https://i.imgur.com/NPhmcae.png");
 background-size: 100%;
 background-repeat: no-repeat;
 background-position:center top; ;
 display: block;
 padding-top:13%;
 padding-right:10%;
 padding-left:10%;
 padding-bottom:13%;

}
.panel-body {
  text-align:justify;
  padding:1px;
  width: auto;
  max-height: 100%;
  display: inline-block;

}

我希望文字适合图像尺寸。即使我调整浏览器窗口的大小。如果需要滚动条（窗口大小太小）就很好了

Answer 1

请尝试输入代码-

.panel-body {
    text-align: justify;
    padding: 1px;
    width: auto;
    max-height: 75vh;
    display: inline-block;
    overflow-y: scroll;
}

Answer 2

我认为您需要添加的是background-size: 100% 100%;

查看我为模仿您的div而设置的JSFiddle。第二个100％会强制图像变为div的整个宽度，因为图像未随div的高度扩展。如果您从JSFiddle中删除了第二个100％，您会看到红色边框仍在扩展，但是图像却没有。

#div2{
    background-image:url(https://i.imgur.com/NPhmcae.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position:center top;
    display: block;
    padding-top:13%;
    padding-right:10%;
    padding-left:10%;
    padding-bottom:13%;
    height:auto;
    width:auto;
    border: 1px solid red;
}

<div id="div2">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
</div>

您可能会遇到的一个问题是，如果文本太多/太少，图像将严重失真。

如何解决：CSS / HTML中的文本溢出DIV？

2 个答案: