Question

我有一个容器，左侧和右侧有两个背景图像。左侧图像应显示高度100％，右侧图像显示宽度50％。图像本身具有高分辨率，我希望它们以正确的比例显示。因此，左图像的宽度和右图像的高度应为auto。

但我的问题是，div-container需要展示尺寸。我怎么做，因为我不知道这两个参数？

更新：如果我使用width: 300px作为div-container，我可以使用background-size: 100% auto，这是有效的。但我不知道宽度......

那么实现这一目标的好方法是什么？

＆＃13;

main {
  background-color: green;
  height: 500px;
  position: relative;
}
#left_image {
  background-image: url(images/left.jpg);
  height: 100%;
  display: inline-block;
  background-size: cover;
}
#right_image {
  background-image: url(images/right.jpg);
  width: 50%;
  display: inline-block;
  background-size: cover;
  position: absolute;
  right: 0;
}

＆＃13;

<main>
  <div id="left_image"></div>
  <div id="right_image"></div>
</main>

＆＃13;

Answer 1

如何使用<img>？

<main>
  <img src="images/left.jpg" id="left_image">
</main>

#left_image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

这也适用于IE8。不知道使用background-image ...

的优势

以正确的比例显示背景图像

1 个答案: