Question

我内置了HTML标记，我需要更改以下内容：

<img src="..." />

向

<img class="image" /> // Could also be a div, doesn't matter

并给它一个背景图像CSS样式（这是由于webpack捆绑和我在.md文件中没有导入和变量的事实）

问题是第一个选项正确加载图像而不必指定高度/宽度，第二个方法显示什么都没有，除非我指定高度/宽度。

Fiddle demonstrating issue

为什么会这样，有没有办法绕过这个而不指定每次出现的高度/宽度？

Answer 1

您可以做的最好的事情是计算img的比例，然后使用padding和cover的值来拟合：

例如，如果图像是1:1比例：

.image {
  background-image: url('http://i.imgur.com/3Zh2iqf.jpg');
  background-repeat: no-repeat;
  background-size:cover;
  padding-top:100%;
}

<div>
  <div class="image">
  </div>
</div>

Img src VS CSS背景图像没有内在尺寸

1 个答案: