如何给具有背景图像的 div 百分比高度？

Question

我的页面上有部分图标。

但是，因为我使用的是背景图片，所以我必须为 div .iconImage.linkedIn 指定像素高度。我尝试指定百分比高度，但它不起作用。我想让这个网站在不同的分辨率下看起来不错，那么我如何给带有背景图像的 div 一个百分比高度，同时保持图标的相同功能（文本和图像在悬停在链接上时亮起）？ 请不要给我一个使用像素或 em 表示高度/宽度的答案，因为我想要一个适合不同分辨率的网站。

HTML：

<div class = "icon">
    <a href="https://www.linkedin.com/" target="_blank">
        <div class = "iconImage linkedIn"></div>
        <div class = "iconTitle linkedIn">LinkedIn</div>
    </a>
</div>

CSS：

.iconImage.linkedIn {
    height: 50px;
    background-image: url('../images/linkedin.png'); 
}

.icon a:hover > .iconImage.linkedIn {
    background-image: url('../images/linkedinhover.png');
}

.icon a:hover > .iconTitle.linkedIn {
    color: rgb(130,130,130);
}

Answer 1

• 高度和宽度百分比单位总是相对于 父元素的大小。 （父高度 = 500 像素 & 子高度 = 25% => 孩子身高 = 250px)

• 填充百分比单位是相对于父元素的宽度定义的 容器。

• 视口单位是相对于屏幕的高度/宽度大小。 （100vh = 100% 的视口高度，100vw = 100% 的视口宽度）

在您的代码中，父元素是锚标记<a>。默认情况下，它只占用所需的空间，现在是.iconTitle 元素的大小。

所以要为图标指定33.33%的高度，需要先设置父元素的高度。

或者只是以百分比为单位指定图标的padding 属性。这样你只需要担心父母的宽度。 （我这样做而不是设置高度并按照您的意愿工作）

另外，background-image 属性的行为也不同于 <img> 元素。没有height/width: auto。相反，您必须为 div 指定高度和宽度大小（或者像我一样添加padding），然后设置background-size: contain，以便图像在指定尺寸内自动缩放和呈现而不会被切碎。

最后，不要忘记所有元素的 display 属性。这对于确定元素的宽度和排列至关重要。

---

我已经稍微更正了您的 HTML 代码。我使用<p> 元素作为iconTitle。

.iconTitle {
  display: inline-block;
  float: left;
  padding-left: 10px;
}

.iconImage.linkedIn {
    display: inline-block;
    float: left;
    padding: 3%;
    background-image: url('http://www.myiconfinder.com/uploads/iconsets/3c9eaa4c8dd944eade4d976497f7c5e9.png');
    background-repeat: no-repeat;
    background-size: contain;
}

<div class = "icon">
    <a href="https://www.linkedin.com/" target="_blank">
        <div class = "iconImage linkedIn"></div>
        <p class = "iconTitle linkedIn">LinkedIn</p>
    </a>
</div>

Answer 2

您应该使用 'vw' 或 'vh' 而不是像素。这比百分比效果好得多，因为它们与其祖先的大小无关，而只是与视口大小有关。

.iconImage.linkedIn {
     height: 5vh; /* was height: 50px; */
     ...
}

查看实际操作：http://codepen.io/anon/pen/QGPwBo