Изображение Flexbox в ссылке не работает

Question

У меня есть изображение размером 1039x1039 в ссылке ... Примерно так:

HTML:

<a href="#"><img src="img.png" alt="alt"></a>

CSS:

img {
    align-self: center;

    height: 100%;
    width: auto;
    border: none;
    }
a {
    flex: 0 0 0;
}

Конечно, контейнер установлен на display:flex.Проблема в том, что когда я загружаю страницу, img масштабируется до 80x80, но ссылка 1039x80.Только после нажатия на ссылку она масштабируется до 80x80.Это как flexbox проверяет ширину img после обновления стилей?Есть мысли?

РЕДАКТИРОВАТЬ: Я воссоздал проблему здесь: https://jsfiddle.net/287cLqvh/6/

Answer 1

flex - это свойство, которое применяется к дочерним элементам гибкого контейнера.В этом случае ваш гибкий контейнер для вашего изображения - это <a>, а дочерние элементы этого контейнера - <img>.Чтобы flex работал, вам нужно display: flex; для тега <a>.

Кроме того, я удалил ваш flex: 0 0 0;, потому что я не уверен, что вы пытаетесьдобиться с этим.Я бы подумал, что вы захотите просто использовать flex: 0 1 auto; - но вам не нужно указывать это, так как это значение по умолчанию для flex.

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

Вот пример: https://jsfiddle.net/qox4fa98/

Вы можете сослаться на это: https://css -трюки.ком / сниппеты / CSS / а-руководство к Flexbox /

Answer 2

Оказывается, <a> является встроенным элементом, поэтому он не изменяется при помощи flexbox.Мне пришлось добавить этот стиль в <a>:

display: inline-block;
height: 100%;
width: auto;

Answer 3

В вашем элементе img отсутствует знак равенства (=) после src.

img {
    align-self: center;
    height: 100%;
    width: auto;
    border: none;
    }
a {
    flex: 0 0 0;
}

<a href="#"><img src="https://pbs.twimg.com/profile_images/469017630796296193/R-bEN4UP.png" alt="alt"></a>