Код UL/LI CSS неправильно отображает верхнее меню

Question

У меня возникла ошибка с тем, что теперь мое топ-меню работает, когда я пытаюсь использовать теги ul и li вместо div. У меня есть ul с шестью лигами в нем. Я хочу, чтобы каждый тег li содержал изображение, которое должно иметь те же размеры, что и каждое другое изображение. Каждое изображение тега li должно горизонтально занимать чуть меньше 1/6 страницы. Вертикально они должны быть около 100 px. В настоящее время я не могу правильно отображать изображения. Несмотря на то, что я использую одно и то же тестовое изображение, все отдельные теги визуализируются по-разному.

Вот мой CSS, HTML и изображения, используемые в ссылке Imgur:

HTML: http://pastebin.com/raw/EbyXvXEg

CSS: http://pastebin.com/raw/P8nkGHxN

Imgur: https://imgur.com/a/WF6Dd

я не могу получить чтобы работать так, как я хочу. Элементы среднего меню всегда показывают большую или меньшую картинку. Я не могу заставить это работать. Может ли кто-нибудь помочь мне хотя бы указать направление помощи? Я не уверен, как заставить изображения работать в jsfiddle, иначе я бы опубликовал это.

Answer 1

попытаться добавить jour картинки в качестве фона тегов. Также apry ваш стиль для тегов.

a { 
    width: 16.66%; 
    height: 100px; 
    display: block; 
    background: url(your image URL); 
    background-position: center; 
    background-size: cover; 
    background-repeat: none; 
} 

размер фона: крышка; растягивает изображение до заполнения поля содержимого. Вы также можете использовать изображения разных размеров.