Question

是否可以在一行中有2个不同的图像并将它们完全相同？让我们说我有这样的事情：

.container {
  max-width:1200px;
  margin:0 auto;
  overflow:hidden
}

.left {
  float:left
  width:70%;
}

.right {
  width:30%
  float:right;
}

<div class='container'>
  <div class='left'>
    img here
  </div>
  <div class='right'>
    img here
  </div>
</div>

现在我想用容器的宽度来装配图像。然后当减小浏览器的大小时，我希望以相同的高度缩放它们。我能做到吗？我正在考虑这样的事情：http://prntscr.com/h0j2lj

Answer 1

从您的描述中不太清楚您尝试实现的效果，因此此示例可能与您的实际任务无关。一段代码以70/30的比例逐个显示图像并进行缩放。图像放在背景上，因此在每个布局中可能无法完全显示。

.container {
  max-width:1200px;
  margin:0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.left, .right {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 200px;
}

.left {
  flex: 7 7 70%;
}

.right {
  flex: 3 3 30%;
}

<div class='container'>
  <div class='left' style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/4d/Bees_Collecting_Pollen_cropped.jpg)">
  </div>
  <div class='right' style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5d/Crateva_religiosa.jpg)">
  </div>
</div>

Answer 2

这显示相同的图像在左侧缩放70％，在右侧缩放30％。

.container {
  max-width:1200px;
  margin:0 auto;
  overflow:hidden
}

.left {
  float:left;
  width:70%;
}

.left img{
  width: 100%;
}

.right {
  width:30%;
  float:left;
}

.right img{
  width:100%;
}

<div class='container'>
  <div class='left'>
    <img src="https://www.google.com.ar/logos/doodles/2017/argentina-elections-2017-5640194106589184-l.png"/>
  </div>
  <div class='right'>
    <img src="https://www.google.com.ar/logos/doodles/2017/argentina-elections-2017-5640194106589184-l.png"/>
  </div>
</div>

多个图像的高度css

2 个答案: