css - 无法使图像适合容器

Question

到目前为止，为了使图像适合其容器，以下代码一直对我有用:

img {
    height: auto !important;
    max-width: 100% !important;
    width: auto;
}

今天它不起作用，图像只是以其正常大小显示，如果它对于容器(具有固定的宽度和高度)来说太大，那么它就会被简单地裁剪。这怎么可能？

只是为了提供一些上下文，这里有一个屏幕截图，显示了在选择图像时 Firebug 的输出，然后在选择其容器时显示了另一个图像:

Answer 1

删除 <img>元素然后将以下内容添加到 .publication_logo

 .publication_logo {
   background: url(http://2.bp.blogspot.com/-2PeQj-9BqUU/TqWT9Mcu2MI/AAAAAAAACe8/KBU_6AkuyaQ/s1600/Cnet+logo.png)no-repeat;
   background-size: contain;
   height: 50px;
   width: 20%;
   float: left;
}

片段

.publication_logo {
  background: url(http://2.bp.blogspot.com/-2PeQj-9BqUU/TqWT9Mcu2MI/AAAAAAAACe8/KBU_6AkuyaQ/s1600/Cnet+logo.png)no-repeat;
  background-size: contain;
  height: 50px;
  width: 20%;
  float: left;
}

<div class='publication_logo'></div>