Question

我的问题：

我让班级.logo完全正常工作：width: 316px; height: 300px;

问题是这个标志永远不会有这个尺寸，不应该定义宽度和高度，所以下一个标志可以很好地适合。

我尝试删除宽度和高度但没有成功，当我这样做时，徽标不会出现。

我能在css中做些什么才能使这个工作没有设置宽度和高度？

.logo {
  background-image: url('https://lh5.ggpht.com/tq3WqEUxtRyBn-d_0t3j6WKNHuJDrmLq-FE3GAYrsAMQFIaS7FIgRLfzzql2SvfvLqto=w300-rw');
  background-repeat: no-repeat;
  width: 316px;
  height: 300px;
  display: inline-block;
  margin-top: 20px;
  margin-left: 20px;
}

.logo2 {
  background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg');
  background-repeat: no-repeat;
  width: 316px;
  height: 300px;
  display: inline-block;
  margin-top: 20px;
  margin-left: 20px;
}

<div class="logo"></div>
<div  class="logo2"></div>

Answer 1

设置background-size: contain;

https://jsfiddle.net/wuqvwpkL/1/

Answer 2

我发现这篇文章： Why doesn't the background image show up without specific width and height?

所以你的CSS应该是这样的：

Function1

这适用于两种尺寸不同的徽标。

https://jsfiddle.net/pLfgam3r/4/

CSS如何设置没有设置宽度和高度的图像

2 个答案: