html - 图像未显示在固定的 div 中

Question

由于某种原因，图像没有显示在我尝试创建的 div 中。这可能是一个简单的修复，我只是完全错过了。

(仅以随机图像为例)

https://jsfiddle.net/57053L6h/

片段:

.alert {
  	position: fixed;
  	bottom: 0px;
  	height: 75px;
  	width: auto;
  	margin: 0;
  	padding: 0;
  	padding-right: 50px;
  	background-color: rgba(0, 0, 0, 0.45);
  	display: table;
  	font-weight: bold;
}

.alert p {
	color: white;
	display: table-cell;
  	vertical-align: middle;
  	text-align: center;
}

.alert .icon {
	max-height: 100%;
	max-width: 100%;
	/*animation: bounce 2s infinte;*/
}

<div class="alert">
  <img class="icon" src="https://image.freepik.com/free-icon/user-male-silhouette_318-55563.png" />
	<p>Lorem ipsum<br>
	I can only remember lorem ipsum lol</p>
</div>

Answer 1

也许您想尝试设置您真正想要的最大宽度

   .alert .icon {
      max-width:100px;
   }