Question

我目前在我的工作框中工作并在页面上显示（他们最终会包含图片和说明），但截至目前，他们没有回应，因为他们按比例缩小尺寸，以维持我指定的宽高比。

CSS：

#pageArea {
    display: block;
    margin: 5px auto;   
    max-width: 1200px;
    position: relative; 
}

.projectListingLarge {
    width: 42%;
    height: 479px;
    margin: 0 3% 5% 0;
    background-color: blue;
    float: left;    
}

.projectListingSmall {
    width: 25%;
    height: 200px;
    float: left;    
    margin: 0 3% 5% 0;
  background-color: green;
}

.mS {
  margin-top: 500px !important;
}

.right {
  float: right !important;
}

我已尝试设置max-height，但它根本不表现，只是收缩到div的内容。我也试过一个百分比作为一个高度，但盒子就消失了。

我知道媒体查询会有助于浮动，具体取决于屏幕尺寸，但在媒体查询开始1050px之前，我该如何制作，以便我的相应缩小尺寸？

https://jsfiddle.net/s5g1bzva/1/

Answer 1

将高度设置为百分比通常无济于事，这不仅限于扩展浏览器，还因为大多数浏览器都不会将其与屏幕尺寸相关联。最好的办法是根据不同的屏幕分辨率更改其内容的大小或px的高度。尝试使用“@media screen and（max width： YourSize px）{[your new css rules ...]}”

Answer 2

要按比例缩放div，您需要将height设置为0，并以百分比（相对于宽度）指定padding-bottom。

JSFiddle

#pageArea {
  display: block;
  margin: 5px auto;
  max-width: 1200px;
  position: relative;
}

.projectListingLarge {
  width: 42%;
  padding-bottom: 60%;
  height: 0;
  margin: 0 3% 5% 0;
  background-color: blue;
  float: left;
}

.projectListingSmall {
  width: 25%;
  padding-bottom: 30%;
  height: 0;
  float: left;
  margin: 0 3% 5% 0;
  background-color: green;
}

.mS {
  margin-top: 500px !important;
}

.right {
  float: right !important;
}

.clearBoth {
  clear: both;
  height: -1px;
  display: block;
}

<div id="pageArea">
  <article class="projectListingLarge"></article>

  <article class="projectListingSmall mS">s</article>

  <article class="projectListingSmall right">s</article>

  <div class="clearBoth">

  </div>

  <!-- second batch -->

  <article class="projectListingLarge"></article>

  <article class="projectListingSmall mS">s</article>

  <article class="projectListingSmall right">s</article>

</div>

（以上只是一个例子，您需要为您的案例设置正确的填充底部百分比。）

在调整浏览器大小时，如何使我的框相应缩放

2 个答案: