Question

我希望与

达到同样的效果

<img src="..">
img {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
}

background-image。经过多年摆弄它我只是没有任何想法。我尝试过的是下面的代码段article header .logo

我真正想做的事情：让图像为父图像的100％宽（考虑填充）并自动缩放图像高度。但是改为使用img，我希望使用div和background-image。{/ p>

如果我的图像宽100像素，高50像素，而我的父容器宽1000像素（无填充），则图像宽度应为1000像素，高度为500像素，以保持图像的宽高比。

这是我的代码段

article header img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

article header .logo {
  display: inline-block;
  width: 100%;
  height: auto;
  background-image: url(http://i.stack.imgur.com/6vggB.png)
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <article class="box">

    <header>
      <img src="http://i.stack.imgur.com/6vggB.png">
      <div class="logo"></div>
      <a href="#"><h1>Lorem Ipsum!</h1></a>
    </header>

    <div class="content">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </article>
</div>

Answer 1

请写下面的代码。这将解决您的问题。

您必须将background-size属性写入100％。

background-size：100％;

Answer 2

将透明的.png与要在其位置显示的图像具有相同的宽高比。然后将图像设置为背景图像。像这样：

.transparent-png {
    width: 100%;
    height: auto;
    background-image: url('path_to_your_target_image');
    background-size: cover;
}

或者替代地，但也有一些hacky变通方法，您可以将padding-top设置为：image-height / image-width * container-width [占页面宽度的百分比]。例如，想要占用整个屏幕的1600 * 900图像：

div {
    background-image: url('path_to_my_background_image');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 56.54%;
}

如果你没有至少图像的宽高比，那么这在CSS中是不可能的。

如果您正在处理未知图像，您仍然可以使用第二种方法，但是您必须使用JavaScript来获取图像的高度/宽度，然后进行相应的计算。

背景图像宽度100％高度自动

2 个答案: