Question

我的页面上有一些图标。

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

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

你应该使用＆＃39; vw＆＃39;或者＆＃39; vh＆＃39;而不是像素。这比百分比好得多，因为它们与祖先的大小无关，而只是与视口大小有关。

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

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

Answer 2

高度和宽度百分比单位始终相对于父元素的大小。（父高= 500px＆amp;子身高= 25％=＆gt;儿童身高= 250px）
填充百分比单位是相对于父级的宽度定义的容器
视口单元相对于屏幕的高度/宽度大小。（100vh =视口高度的100％，100vw =视口宽度的100％）

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

因此，要为图标指定33.33％的高度，您需要先设置父元素的高度。

或者只以百分比单位指定图标的padding属性。这样你只需要担心父级的宽度。（我这样做而不是设置高度，就像你想要的那样工作）

此background-image属性的行为与<img>元素不同。没有height/width: auto。相反，您必须为div指定高度和宽度大小（或者只是像我一样添加padding）然后设置background-size: contain，以便图像自动缩放并在指定的维度内渲染而不会被切断。

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

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

.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>

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

2 个答案: