Как дать div, который имеет фоновое изображение в процентах высоты?

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

Вы должны использовать 'фольксваген' или 'VH' вместо пикселов. Это работает намного лучше, чем проценты, поскольку они не связаны с размером их предков, а просто размером с видовым пространством.

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

в действии: http://codepen.io/anon/pen/QGPwBo

Answer 2

• высота и ширина в процентах единицы всегда определяются по отношению к размера родительского элемента. (Родительская высота = 500px & ребенок высота высоты = 25% => ребенок = 250px)

• процент Набивки единица определяется по отношению к ширине родительского контейнера.

• Единица просмотра относится к размеру/ширине экрана. (100vh = 100% от высоты окна просмотра, 100vw = 100% от ширины окна просмотра)

В коде, родительский элемент является якорем тег <a>. И по умолчанию он занимает столько места, сколько ему нужно, что сейчас составляет размер .iconTitle.

Чтобы указать высоту 33,33% для значка, вам нужно сначала установить высоту родительского элемента.

Или просто укажите свойство padding значка в процентах. Таким образом, вам нужно только беспокоиться о ширине родителя. (Я сделал это вместо того, чтобы устанавливать высоту и работал так, как вы хотели)

Также background-image свойство действует отличное от <img> элемент. Нет height/width: auto. Вместо этого вы должны указать размеры высоты и ширины для div (или просто добавить , как и я), а затем установить 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>