Html <img> показывает разный размер некоторых изображений
У меня есть несколько изображений, и я использую этот класс для каждого тега, чтобы установить одинаковую высоту и ширину.
.imgsize{ height:80px; width:80px }
Проблема в том, что некоторые изображения не отображаются в соответствии с размером. вот расположение этих изображений
как вы можете видеть, изображение справа отображается в соответствии с размером в классе CSS, но 1-е и 2-е немного меньше. Однако, когда я обновляю страницу, я вижу первые 2 изображения того же размера, что и третье (но всего на несколько секунд, пока страница не загрузится). Когда я задавал два изображения нестандартного размера, разница составляла 15 пикселей по высоте и ширине.
height = "95" width = "95" style = "margin-top:-6px"
но потом он показал, что он того же размера, что и 3-й. Я не понимаю, почему он так себя ведет.
<div class = "row">
<img src = "Images/icons/images/背景图-（03_42.png" />
<div class = "col-lg-4 col-md-1 col-sm-1">
<img src = "Images/中控首页按钮/首页按钮-默认状态/控制页面_106.png"
id = "CurtainOpen" class = "imgclick imgsize" /></div>
<div class = "col-lg-4 col-md-1 col-sm-1">
<img src = "Images/中控首页按钮/首页按钮-默认状态/控制页面_108.png"
id = "CurtainClose" class = "imgclick imgsize"/></div>
<div class = "col-lg-4 col-md-1 col-sm-1">
<img src = "Images/详细页图标/全部按钮/控制全页面-默认状态/控制页面_110.png"
id = "CurtainStop" class = "imgclick imgsize" /></div>
</div>
Что-то не так с изображениями или с кодом.? Любые советы будут оценены.
Редактировать:
Это снимок экрана во время загрузки страницы - так изображения выглядят одинакового размера друг с другом всего... может быть, всего 2 секунды -
@Justinas Прости, но это ничего не изменило
Ответы 2
извините, что написал это в ответ, потому что у меня недостаточно репутации, чтобы написать комментарий.
в любом случае,
из вашего вопроса в теге html вы получаете внутри height="95" width="95" style="margin-top:-6px".
Итак, попробуйте ввести его в свой css
.imgsize{ height:80px !important; width:80px !important; }
он игнорирует любые стили сообщений, если вы не перезагрузите или не измените класс, отображающий css.
Это тоже не работает. И я думаю, что если бы какой-либо другой класс менял свой макет, это, вероятно, должно было повлиять на другие изображения, поскольку у меня есть только разные src и IdNames. стайлинг такой же. Я проверил, их фактический размер примерно одинаков, но на веб-странице они отображаются по-разному. Но теперь я думаю, что с этими несколькими изображениями может быть что-то не так.
Вы можете проверить еще одну вещь? попробуйте очистить кеш (например: откройте веб-страницу в секретном режиме Chrome и т. д.) и посмотрите, все еще показывает то же самое.
!important — это очень плохая практика, и это означает, что вы сделали что-то не так с кодом CSS.
Привет, спасибо за вашу помощь, ребята. Проблема решена сейчас, и это то же самое, как я начал думать, оно не отображало тот же размер, потому что эти изображения были очень маленькими по размеру, чем другие изображения на моей странице. эти изображения были размером 93-99 пикселей, поэтому они могли не отображаться в соответствии с классом css (80px). Я заставил этих людей изменить размер изображения и сделать его изначально больше. Сейчас выглядит так же.. Но все же я сомневаюсь, так как 80 пикселей было мало по сравнению с исходным размером, а также не отображалось правильно.
Попробуйте добавить
img {display: inline-block}