Вертикально растягиваемые изображения в Safari с родительским контейнером в виде гибкого дисплея

Question

У меня есть простой ul / li с изображениями / текстом внутри. В Safari изображения растягиваются по вертикали:

HTML Код:

<ul class="dropdown-menu">
        <li>
        <a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
                    <li>
        <a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
                    <li>
        <a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint</a></li>
        </ul>

CSS:

.dropdown-menu > li > a {
    border-top: 0 solid #efefef;
    color: inherit;
    display: flex;
    padding: 10px 30px 12px;
    clear: both;
    font-weight: normal;
    line-height: 25px;
    white-space: nowrap;
}

 ul.dropdown-menu li a img {
    width: 25px;
    margin-right: 15px;
}

Safari:

Chrome:

URL действующей скрипки для проверки: https://jsfiddle.net/raghav_khunger/ko0wybhx/8/

Я могу добавить жестко закодированную высоту 25px к изображению, чтобы преодолеть эту проблему:

ul.dropdown-menu li a img

Еще одним решением может быть наличие align-items: center; правило для .dropdown-menu> li> a (https://jsfiddle.net/raghav_khunger/ko0wybhx/10/)

Есть ли какое-либо иное решение для этого?

Допустимы ли вышеуказанные решения для создания изображений не растягивать?

Можете ли вы объяснить причину растягивания изображений в Safari, тогда как в Chrome?

он работает нормально?

Answer 1

вы можете попробовать с этим кодом, надеюсь, он будет работать для вас.

.dropdown-menu > li > a {
    border-top: 0 solid #efefef;
    color: inherit;
    display: flex;
    padding: 10px 30px 12px;
    clear: both;
    font-weight: normal;
    line-height: 25px;
    white-space: nowrap;
    
}

 ul.dropdown-menu li a img {
    width: 25px;
   
    margin-right: 15px;
}

<ul class="dropdown-menu">
            <li>
            <a>
              <div>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint
              </div>
            </a></li>
                         <li>
            <a>
              <div>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint
              </div>
            </a></li>
             <li>
            <a>
              <div>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg/1024px-Microsoft_Office_SharePoint_%282018%E2%80%93present%29.svg.png">SharePoint
              </div>
            </a></li>
            </ul>