Изображение внутри тега HTML <img>имеет неправильную ширину (не соответствует значению из его CSS) - PullRequest
1 голос
/ 01 июля 2019

У меня действительно странная проблема, может быть, я не понимаю или не могу видеть что-то очевидное, но, на мой взгляд, действительно странные вещи случаются.

У меня есть список элементов, у каждого из них есть дочерний тег, статическая ширина 80px которого установлена ​​внутри класса css. Иногда случайные из этих изображений загружаются так (скриншот):

https://res.cloudinary.com/leninsdo/image/upload/v1562003304/Screenshot_2_thnczb.png

Они имеют ширину 35px и некоторый запас вместо ширины 80px, как они ожидали, и как большинство из них в большинстве случаев. И это действительно случайно, случается время от времени, даже не может это отладить.

Но что меня больше интересует, когда я нажимаю «Выбрать элемент на странице для его проверки» в Инспекторе Chrome:

https://res.cloudinary.com/leninsdo/image/upload/v1562003333/Screenshot_3_sk0zrz.png

Все изображения немедленно изменяют размер до нормального 80px, как и ожидалось:

https://res.cloudinary.com/leninsdo/image/upload/v1562003588/Screenshot_4_wp5d7m.png

Почему это может произойти?


UPDATE

Точный фрагмент кода из исходного кода, который вы просили:

<div className="doc-attachment">
    <img src={attach.imageSrc} />
    <div>
        <div>{attach.name}</div>
        <div>{"Дата загрузки: " + getFormattedDate(attach.date)}</div>
    </div>
</div>

CSS:

.doc-attachment img {
    height: 100%;
    width: 80px;
    margin-right: 20px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...