html - CSS:如何保持图像永远不会用相同的 "offset"修改？

Question

<img src="/static/img/footer-top.png" 
     style="margin: 0; padding: 0; width: 100%; position: relative; left: 0">

<footer id="footer" style="background-color: #214269; height: 100%">
    <div class="footerrow">
        <div class="container">
            <div class="col-lg-12">
                <div class="footer-box">
                    <ul class="footer-links">
                        <li class="active"><a href="/fr/legal/a-propos/">À propos</a></li>
                        <li><a href="/fr/legal/contact/">Contact</a></li>
                        <!-- blabla -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

这就是你得到的:

问题是当你调整窗口大小时，图像也会调整大小，这会造成两件坏事:

• Logo 不再正确对齐
• 整个标志变小了还是变高了

像这样:

我没有在谷歌上找到解决方案:图像未调整大小，具有固定偏移并且不是背景图像，而是标签 < strong>img.

Answer 1

使用 HTML 中的实际值设置您的图像，如下所示:

<img class="vanish" src="images/colours.png" alt="Colourful painting" width="480" height="615">

在上面的示例中，我链接到的图像的实际大小是 480 x 615。

然后，如果需要，通过 CSS 文件控制定位和调整大小。

记住: 可以通过 CSS 缩小图像，但如果您不使用原始的较大尺寸图像，请确保将其替换为您实际想要的最大图像使用。

因此，例如:Jsfiddle

.container {
  width: 960px;
  height: auto;
  margin: 0 auto;
}
.image-wrapper {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
.image-wrapper img {
  width: 100px;
  height: 100px;
}
p {
  word-spacing: 20px;
}

<div class="container">
  <div class="image-wrapper">
    <img src="http://i.imgur.com/sUB6EMh.png" width="200" height="200">
    <p>HOME ABOUT GALLERY CONTACT</p>
  </div>
</div>