Question

当我将所有jpg＆＃39; s调整到相同的大小时，布局工作正常。但是当它们的大小不同时，它们并不适合我所拥有的div。我添加了一个显示问题的代码段。最后两张照片是垂直的，有点太大了

这是我的HTML和CSS

＆＃13;

#firstSection {
  width: 50%;
  float: left;
}
.otherSections {
  width: 25%;
  float: left;
  overflow: hidden;
}
img {
  display: block;
  width: 100%;
}
@media only screen and (max-width: 479px) {
  #firstSection,
  .otherSections {
    clear: both;
    width: 100%;
  }
}

＆＃13;

<main>
  <section id='firstSection' >
      <img  alt="DSC_001.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_001.JPG"/>
  </section>
  <section class='otherSections'>
      <img alt="DSC_002.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_004.jpg"/>
      <img alt="DSC_003.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_005.jpg"/>
  </section>
  <section class='otherSections'>
            <img alt="DSC_002.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_004a.JPG"/>
            <img alt="DSC_003.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_005b.jpg"/>
  </section>
   </main>

＆＃13;

Answer 1

您可以使用object-fit：

＆＃13;

#firstSection {
  width: 50%;
  height: 100vh;
  overflow: hidden;
}
.otherSections {
  width: 25%;
  height: 100vh;
  overflow: hidden;
}
img {
  display: block;
  width: 100%;
  height: 50%;
  object-fit: cover;
  border: solid;
  box-sizing: border-box;
  object-position: right top;
}
img + img {
  object-position: center center;
  }
#firstSection img {
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 479px) {
  main,
  #firstSection,
  .otherSections {
    clear: both;
    width: 100%;
    display: block;
    height: auto;
  }
}
main {
  display: flex;
  flex-flow: column wrap;
  height: 100vh;
}
body {
  margin: 0;
}

＆＃13;

<script src="http://bfred-it.github.io/object-fit-images/dist/ofi.min.js"></script>
<main>
  <section id='firstSection'>
    <img alt="DSC_001.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_001.JPG" />
  </section>
  <section class='otherSections'>
    <img alt="DSC_002.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_004.jpg" />
    <img alt="DSC_003.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_005.jpg" />
  </section>
  <section class='otherSections'>
    <img alt="DSC_003.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_005b.jpg" />
    <img alt="DSC_002.jpg" src="http://www.sailwbob.com/skipper/public/img/DSC_004a.JPG" />
  </section>
</main>

＆＃13;

Answer 2

如果您的所有图片都具有相同的宽高比（或者至少大致相同，例如所有示例图片中的3：2），您可以使用背景图片和一些javascript来完成：

1。）创建空DIV，将其宽度设置为50％或25％

2。）使用background-size: cover和background-repeat: no-repeat

将背景图片应用于所有这些图片

3。）由于DIV没有高度（背景图像不算作内容），你必须定义它们的高度：使用javascript获取父元素（窗口？）的宽度

4。）根据宽度百分比和图像比率计算高度，并通过javascript设置为高度。对于宽度为parentwidth * 0.25 * 2/3的25％宽DIV，对于50％宽DIV parentwidth * 0.5 * 2/3

此外：

这是我完成所有工作的代码笔：http://codepen.io/anon/pen/Bpmxxd

以下片段中的内容相同：

＆＃13;

parentwidth = $('main').innerWidth();

height1 = parentwidth * 0.5 * 2/3;
  $('#firstSection').height(height1);

height2 = parentwidth * 0.25 * 2/3;
  $('.otherSections').height(height2);

＆＃13;

main {
  border: 1px solid red;
  overflow: hidden;
}
#firstSection {
  background: url(http://www.sailwbob.com/skipper/public/img/DSC_001.JPG) no-repeat center;
  width: 50%;
  float: left;
}
.x1 {
    background: url(http://www.sailwbob.com/skipper/public/img/DSC_002.JPG) no-repeat center;
}
.x2 {
   background: url(http://www.sailwbob.com/skipper/public/img/DSC_003.JPG) no-repeat center;
}
.x3 {
   background: url(http://www.sailwbob.com/skipper/public/img/DSC_004a.JPG) no-repeat center;
}
.x4 {
   background: url(http://www.sailwbob.com/skipper/public/img/DSC_001.JPG) no-repeat center;
}
.x1, .x2, .x3, .x4 {
  width: 25%;
  float: left;
}

#firstSection, .otherSections  {
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<main>
  <section id='firstSection'>
  </section>
  <section class='otherSections x1'>
  </section>
  <section class='otherSections x2'>
  </section>
  <section class='otherSections x3'>
  </section>
  <section class='otherSections x4'>
  </section>

</main>

＆＃13;

如何调整图片大小并保持可扩展性

2 个答案: