Question

任何人都可以解释一下，当我将内容放在下面的div中时，为什么我会得到滚动条。

＆＃13;

* {
  margin:0;
  padding:0;
}
div {
  top:0;
    position: relative;
    background: url("https://4.bp.blogspot.com/-k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg") no-repeat;
    background-size: contain;
    padding-bottom: 56.25%;
}

＆＃13;

<div>
  <br><br><br><br><br><br>
</div>

＆＃13;

如果我删除了div中的br标签 - 也删除了滚动条。

溢出：隐藏 - 不是一种选择。

我希望能够使用div内的内容，但所以div仍将保持宽高比 - 我该如何实现呢？

Answer 1

指定宽度和高度以保持纵横比并添加overflow-y：hidden;删除滚动条。

<div>
  <br><br><br><br><br><br>
</div>

CSS

* {
  margin:0;
  padding:0;
}
div {
  top:0;
  width: 300px;
  height: 40px;
    position: relative;
    background: url("https://4.bp.blogspot.com/-k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg") no-repeat;
    background-size: contain;
    padding-bottom: 56.25%;
    overflow-y:hidden;
}

希望这会有所帮助：）

Answer 2

这个解决方案怎么样？在外部div内部div与绝对位置，因为你不想失去比例。内部div内容你想要的内容。 jsfiddle

<div class="outer">
    <div class="inner">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
</div>

Answer 3

在此代码中，我设置最小，最大宽度和高度，以便宽度/高度不会改变内容是否过多或更少。这将保持纵横比

＆＃13;

* {
  margin:0;
  padding:0;
}
div.bg {
  color: #f00;
  top:0;
  min-width: 200px;
  min-height: 300px;
  max-width: 200px;
  max-height: 300px;
  position: relative;
  background: url("https://4.bp.blogspot.com/-k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg") no-repeat;
  background-size: cover;
  /*
  padding-bottom: 56.25%;
  */
}

＆＃13;

<div class="bg">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>CONTENT
</div>
<div>ANOTHER CONTENT</div>

＆＃13;

div中的内容没有制动div的宽高比

3 个答案: