无法使图像适合容器

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>

Answer 2

您在.publication_logo

中仅50px height

但是我看不到overflow: hidden

的parent div样式

Answer 3

以下css应该有效，我还建议从父div中删除overflow: hidden

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

编辑：我在每个指令后删除了！important，因为OP表示它没有。