使网站徽标灵活适用于不同设备，同时使其居中

Question

关于CSS，我的最后一个问题是：

网站背景响应

这是关于响应式背景的，经过长时间的研究，我解决了这个问题。 我尝试使用我学到的一些知识，并使其达到我想要的效果，但是（！）我搞砸了一些东西。

<style type="text/css">
.logo {
    display: block; 
    text-align: center;
    margin-top:40px;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
</style>

<img src="https://www.google.com.tw/images/srpr/logo11w.png"  class="logo"/>

为了简单起见，我将两者放在一起。 您可能看不到小提琴或类似的东西。 在较低的分辨率下它可以正常工作，但是如果我在1920x1080屏幕上对其进行屏幕截图，然后在photoshop中检查徽标的左侧和右侧，则可以清楚地看到从右边框到徽标的差异大于从对面的站点。

我真的很感谢一些想法！

Answer 1

max-width: x%和max-height: x%的组合在调整大小时使图像保持正确的比例（使百分比大小保持相同）。

进行图像display: table允许宽度可变的图像以margin: 0 auto居中margin: 0 auto

在此示例中，图像为400px x 400px，最大宽度/最大高度设置为40％。 这只是使调整大小对于演示很明显。 全屏打开它，然后调整窗口大小以查看缩小。

CSS / HTML /演示

 .logo { display: table; margin: 40px auto 0; max-width: 40%; max-height: 40%; } 

 <img class="logo" src="http://www.placehold.it/400">