CSS如何在沒有設置寬度和高度的情況下設置圖像

Question

我的問題 ：

我有類.logo與此尺寸完美配合： width: 316px; height: 300px; width: 316px; height: 300px;

問題是這個標志永遠不會有這個尺寸，寬度和高度不應該被定義，所以下一個標志可以很好地適應。

我嘗試刪除寬度和高度但沒有成功，當我這樣做時，標志不會出現。

這是我可以在 css 中做的事情，無需設置寬度和高度即可完成這項工作？

https://jsfiddle.net/pLfgam3r/1/

 .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

我找到了這篇文章： 為什么沒有特定的寬度和高度，背景圖像不顯示？

所以你的 css 應該是這樣的：

.logo2 {
    background-image: url('https://i.ytimg.com/vi/SfBR9aGrk9k/maxresdefault.jpg');
    no-repeat: true;
 display: block;
  position: relative;
  width: 316px;
  height: 300px;
  padding-bottom: 20%;
  background-size: 100%;
  background-repeat: no-repeat
}

這適用於具有不同大小的兩個徽標。

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