Я не могу получить изображения одинакового размера [HTML / CSS]

#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 каждый раз, когда применяю стиль