我无法获得相同大小的图像 [HTML/CSS]

Question

我有两张高度为 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;
}

Answer 1

你可以只做512*512的父标签。然后只是使图像成为 width:100%; height:100%;

还检查检查图像是否溢出，如果是，则overflow:hidden

Answer 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>