html - Logo 在移动 View 中被截断

Question

我是响应式设计的新手，请多多包涵。我正在为我父亲建立他的网站，并将以下 CSS 代码应用于 Logo 图像:

img.logo {max-width: 500px; width:100%; margin-left: auto; margin-right: auto; display: block;}

当我试图让我的浏览器更窄时，问题出现了。图像会缩小一点，但随后停止缩放并被截断。您可以在此页面上看到我在说什么:http://cellphonerepairus.com/test/old/samsung.html

我使用了 max-width: width-in-px; width:100%; 在另一个网站上成功。我什至添加了 max-height: height-in-px; height:100%; 无济于事，所以我将其删除以查看是否有帮助。没有。我的页面上确实有视口(viewport)元标记。有人请帮助我。谢谢!

Answer 1

由于 Logo 上的填充，它会导致 Logo 实际的最大宽度为 530 像素。为防止这种情况，您可以使用 box-sizing 告诉浏览器在宽度中包含填充 border-box :

img.logo {
  box-sizing: border-box;
}

或者一个calc()从宽度中删除填充的等式。

img.logo {
  width: calc(100% - 30px);
}

任何一段代码都可以解决您的问题。

注意:我通常在所有响应式网站中使用此代码。

* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}