使用CSS使第二个图像比第一个图像小50％

Question

我有一个包装器和两个显示在flexbox行中的图像。我想确保第二张图像（在右侧）比第一张图像（左侧）小50％，并且在整个空间上仍然保持50％的拉伸图像。所以左图比右图大50％。它们都应该使用包装器的整个宽度。我该如何解决这个问题？

以下是示例（红色容器=包装1400px，左图像比右图像大50％，整个包装上的图像拉伸和自己的容器上的图像正确匹配）：

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
}

.img-wrapper {
  position: relative;
}

<div class="wrapper">
  <div class="img-container">
    <img src="https://dummyimage.com/vga">
  </div>
  <div class="img-container img-right">
    <img src="https://dummyimage.com/vga">
  </div>
</div>

Answer 1

你可以使用flexbox，在flex:1中使用div，在第二个flex: 0 calc(100%/3)使用.wrapper { max-width: 1400px; margin: 0 auto; display: flex; } .img-container { box-sizing: border-box; border: 1px solid red } img { width: 100%; height: 100%; display: block } .img-container:first-of-type { flex: 1 } .img-container:last-of-type { flex: 0 calc(100%/3); /*for IE only*/ flex-basis: calc(100%/3); }

<div class="wrapper">
  <div class="img-container">
    <img src="https://dummyimage.com/640x480/ccccccc">
  </div>
  <div class="img-container">
    <img src="https://dummyimage.com/480x640/ccccccc">
  </div>
</div>

object-fit:cover

OP对上述代码段的评论：

  

现在是2/3到1/3，这是完美的。我唯一的问题是，我的   正确的图像看起来不太好..我想我必须把它放在中心并使用   溢出：隐藏;让它看起来正确吗？这可能吗？我希望你   可以想象我的意思

然后您可以使用.wrapper { max-width: 1400px; margin: 0 auto; display: flex; } .img-container { box-sizing: border-box; border: 1px solid red } img { width: 100%; height: 100%; object-fit: cover; } .img-container:first-of-type { flex: 1 } .img-container:last-of-type { flex: 0 calc(100%/3); /*for IE only*/ flex-basis: calc(100%/3); }，请注意doesn't work in IE

<div class="wrapper">
  <div class="img-container">
    <img src="https://dummyimage.com/vga">
  </div>
  <div class="img-container">
    <img src="https://dummyimage.com/vga">
  </div>
</div>

@Test
public void testFirstFeature() {
  ... one line of setup
  ... invoke method on object under test
  ... assert something
} ...

@Test
public void testMoreAdvancedFeature() {
  ... multiple 
  ...   lines
  ...       of setup

  ... invoke method on object under test
  ... assert something
} 

Answer 2

我认为你可以简单地使用容量为66.7％和33.3％的width：

＆＃13;

＆＃13;

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
}

.img-container {
  display: inline-block
}

.img-container {
  width: 66.7%;
}

.img-container.img-right {
  width: 33.3%;
}

.img-container img {
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="wrapper">
  <div class="img-container">
    <img src="https://dummyimage.com/vga">
  </div>
  <div class="img-container img-right">
    <img src="https://dummyimage.com/vga">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试在flex项目上使用flex-grow（在我看来是img-container的情况下）。

.img-container {
    flex-grow: 2;
}

.img-container.img-right {
    flex-grow: 1;
}

此页面是使用flex的一个很好的指南： https://css-tricks.com/snippets/css/a-guide-to-flexbox/