#html #css #image-scaling
#HTML #css — код #масштабирование изображения
Вопрос:
У меня есть две картинки, которые имеют 512 пикселей в высоту и 512 пикселей в ширину. Независимо от того, что символ плюса больше, чем кнопка выключения.
HTML:
<div class="logout">
<a href="someLink">
<img name="logout" alt="logout" src="red_shutdown.png">
</a>
</div>
<div class="plus-symbol">
<img name="plus" alt="create-post" src="plus-symbol.png">
</div>
CSS — код:
div.logout {
position: fixed;
bottom: 10%;
right: 1.32%;
border: 0;
}
div.plus-symbol {
position: fixed;
bottom: 10%;
right: 1.32%;
border: 0;
}
Ответ №1:
Вы можете просто сделать родительский тег 512 * 512. затем просто сделайте изображение таким, чтобы width:100%; height:100%;
Также проверьте в inspect, переполнены ли изображения или нет, если да, то overflow:hidden
Комментарии:
1. или просто установите img height и widt 100% и max-height и max-width 512 пикселей
Ответ №2:
Если этот вариант не работает, скажите мне, пожалуйста.
<style>
img {
width: 512px !important;
height: 512px !important;
}
</style>
И вы также можете поместить класс в
Просто так:
<div class="logout">
<a href="someLink">
<img name="logout" class="img_icon" alt="logout" src="red_shutdown.png">
</a>
</div>
<div class="plus-symbol">
<img name="plus" class="img_icon" alt="create-post" src="plus-symbol.png">
</div>
<style>
.img_icon {
width: 512px !important;
height: 512px !important;
}
</style>
Комментарии:
1. Здесь нет необходимости использовать
!important
. Кроме того, вам следует избегать использования!importan
в любом случае.2. ОК. Хорошо, я использую
!important
not каждый раз, когда применяю стиль