CSS图片显示异常：页脚被顶起且图片尺寸不符

Hey there, let's break down what's going on with your footer and image issues and fix them step by step!

1. Fixing the Image Size Mismatch #

The reason your image isn't showing up as 90px wide / 70px tall boils down to how CSS calculates element size by default. Here's the breakdown:

• By default, CSS uses box-sizing: content-box, which means the width and height you set only apply to the image's content area. Your padding: 2rem gets added outside those dimensions, making the total element size way larger than expected.
• Your current width: 60px and height: 60px also don't match your desired 90x70 dimensions.

Here's the corrected CSS for your image class:

.footerfacebook{
  position: absolute;
  bottom: -3.54%;
  left: 3%;
  padding: 2rem;
  width: 90px; /* Set your desired width */
  height: 70px; /* Set your desired height */
  box-sizing: border-box; /* Critical: makes padding count toward the set width/height */
  object-fit: contain; /* Optional: preserves the image's aspect ratio to avoid stretching */
}

With box-sizing: border-box, the padding is included within the 90x70 dimensions, so the element will match your expected size exactly.

2. Fixing the Footer Being Pushed Up & White Space Below #

The root issue here is how absolute positioning interacts with your page layout:

• Your .footer is absolutely positioned, but if its parent container (like <body>) doesn't have position: relative, the footer and image will be positioned relative to the entire viewport instead of a contained area.
• The image's bottom: -3.54% is pushing it below the footer's bounds, which creates the unexpected white space.

Here's how to fix this:

Step 1: Update the parent container (e.g., <body>)

Add this to your global CSS to give the footer a proper positioning context:

body {
  position: relative;
  min-height: 100vh; /* Ensures the page takes up at least the full viewport height */
  margin: 0; /* Remove default body margin to avoid extra spacing */
}

Step 2: Adjust the footer and image positioning

If you want the image to be part of the footer, move the image inside the footer container in your HTML (this makes positioning more intuitive):

<div class="footer">
  <a href="https://facebook.com/aaster23" target="_blank">
    <img class="footerfacebook" src="http://pngimg.com/uploads/facebook_logos/facebook_logos_PNG19754.png">
  </a>
  <!-- Add your other footer content here -->
</div>

Then update the image's positioning to be relative to the footer:

.footerfacebook{
  position: absolute;
  bottom: 1rem; /* Aligns with the footer's padding */
  left: 3%;
  padding: 2rem;
  width: 90px;
  height: 70px;
  box-sizing: border-box;
  object-fit: contain;
}

This way the image stays within the footer's context and won't push the footer up or create extra white space below it.

Final Checks #

• Double-check that no other CSS rules are overriding your .footer or .footerfacebook styles (use browser dev tools to inspect the elements if needed).
• If you still see white space, ensure your page content doesn't have extra margin/padding that's pushing the footer down.

内容的提问来源于stack exchange，提问作者G. Yordanov