时间戳

首页 > 解决方案 > 无法将徽标调整到特定高度

html - 无法将徽标调整到特定高度

问题描述

我正在尝试将徽标合并到 HTML 页面中，但我似乎无法将其高度自动调整为 140 像素的最大高度。当我这样做时，徽标会被切掉。请参阅此示例：

.partner-logo {
  background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
  margin-top: 20%;
  max-height: 140px;
  left: 96px;
  z-index: 1;
  background-repeat: no-repeat;
}
<div class="partner-logo">
  &nbsp;
</div>

如何确保此徽标可以具有 100% 的宽度，但最大高度仅为 140 像素？

标签： htmlcss

解决方案

Please try applying background-size: contain property to your css. background-size: contain scales the image as large as possible without cropping or stretching the image.

For more about background-size property see mdn

.partner-logo {
  background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
  margin-top: 20%;
  max-height: 140px;
  left: 96px;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
<div class="partner-logo">
&nbsp;
</div>

推荐阅读