我无法获得相同尺寸的图像 [HTML/CSS]

Question

我有两张图片，高 512px，宽 512px。任何加号都比关机按钮大。

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

这个变体不起作用，请告诉我。

<style>
   img {
      width: 512px !important;
      height: 512px !important;
   }
</style>

你也可以把 class 放到

就这样:

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

Answer 2

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

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

我无法获得相同尺寸的图像 [HTML/CSS]

I can't get images to the same size [HTML/CSS]

html

css

image-scaling