IMG SRC VS CSS背景图像没有内在的尺寸

我有与HTML减价内建成，我需要改变如下：IMG SRC VS CSS背景图像没有内在的尺寸

<img src="..." />

进入

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

，并给它一个背景 - 图像CSS样式，而不是（这是由于webpack捆绑和事实我没有进口和变量在.md文件）

问题是，第一个选项正确加载图像没有公顷ving指定高度/宽度，第二种方法不显示任何东西，除非我指定高度/宽度。

Fiddle demonstrating issue

这是为什么，并且是有办法绕过这个不指定高度/宽度为每一个这样的occurence？

来源

2016-05-26 Omri Aharon

为什么？因为设置背景图像只有这样做，并且如果元素没有内容或定义的尺寸，则会相应地折叠，并且由于背景没有尺寸，因此无法看到背景。 – j08691

@ j08691有道理。反正有吗？ –

有什么方法可以解决什么问题？有一个空的元素（不是''）没有尺寸，没有内容显示背景图片？第 – j08691

你能做的最好的是计算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>

来源

2016-05-26 15:22:34 DaniP

好的方法。它总是欢迎学习新的东西:) –

非常好的巫术！ –

@OmriAharon很乐意帮助你 – DaniP

IMG SRC VS CSS背景图像没有内在的尺寸

回答

相关问题