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

为中心

在此示例中，图像为400px x 400px，最大宽度/最大高度设置为40％。这只是为了使演示的重新大小变得明显。全屏打开并重新调整窗口大小以查看缩小。

CSS / HTML / Demo

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

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

使网站徽标灵活适用于不同的设备，同时保持其中心

1 个答案: