Question

考虑到未知宽高比的容器div，我想显示一个或两个具有固定1：1宽高比的内容块，如图像或代码清单。这是一个示例设置： https://jsfiddle.net/3vq0rxwj/2/

<div class="content-container">
  <div class="content-object"><img src="https://placehold.it/350x350" /></div>
  <div class="content-object"><img src="https://placehold.it/350x350" /></div>
</div>

要最佳使用可用空间，对于容器纵横比介于2：3和3：2之间，单个对象应尽可能大。对于宽高比小于2：3，两个对象应显示在彼此之上，并且对于大于3：2的宽高比，它们应该彼此相邻，同样尽可能大。

有没有办法让它在没有JavaScript的情况下运行？

Answer 1

.content-container {
  position:absolute;
  background-color:#9999FF;
  width:100%;
  height:calc(100% - 100px);
  display:flex;
  flex-wrap:wrap;
}

.content-object {
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

.content-object:nth-child(1) {
    flex:0 1 350px;
    background:Plum;
}


.content-object:nth-child(2) {
    flex:1 0 350px;
    background:Purple;
}

@media only screen and (max-width:700px)
{
    .content-object:nth-child(1) {
        flex:1 0 350px;
    }
}

@media only screen and (min-width:900px)
{
    .content-object:nth-child(1) {
        flex:1 0 350px;
    }
}

https://jsfiddle.net/cmckay/3vq0rxwj/4/

将固定的宽高比对象放在不同的宽高比容器中

1 个答案: