Question

如果我减小宽度，徽标将在较小的屏幕尺寸中受到影响，因此需要占用100％的空间。

但是，如果我使用100％的宽度，则徽标太大。

我尝试将图片缩小，但是当我使用100％宽度时，图片的尺寸仍然相同。

整整一年以来，我一直在努力解决这个问题。我该怎么办？

<img class="logo" src="logo.png">



logo {
    position: fixed; 
    width: 100%;
    top: -15px;
    height: auto;
    left: 50%;
    transform: translate(-50%);
 }

Answer 1

您应该使用MediaQuery

#logo {
  width: 200px;
  margin: 0 auto;
  display: block;
}

@media (max-width: 468px) {
  #logo {
    width: 100%;
  }
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" id="logo" />

或使用min-width和max-width如下所示：

#logo {
  min-width: 200px;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" id="logo" />

Read more about css media query

Answer 2

尝试一下：

img {
    display: block;
    max-width:100px;
    max-height:100px;

    height: auto;
    position: fixed; 
    width: 100%;
    top: -15px;
    left: 50%;
    transform: translate(-50%);
}

<img width="400" height="400" src="https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/firefox/files/2017/12/firefox-logo-300x310.png">

使用100％宽度时徽标太大

2 个答案: