Question

我的网站顶部也有一个链接的图像，例如横幅，当我在手机上查看时，它的大小保持不变。如何缩小移动设备尺寸？

Answer 1

假设您网站的其余部分都具有响应能力，则只需为图像添加100％的宽度。

例如，如果您的图片具有“ my-img”类

.my-img {

  width:100%;
  max-width:600px;
  height:auto;

}

或者如果您想直接进行

<img src="" class="my-img" style="width:100%;max-width:600px;height:auto" />

Answer 2

即使您没有注意到，它也可能是响应式的。您的代码中必须包含以下内容：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

 1. Use Bootstrap js and Bootstrap CSS in that use media queries according to 
    screen 
 2. width do the coding or use class xs sm md lg.

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px)

Answer 4

在您的代码上添加媒体查询，例如：

@media screen and (max-width: 600px) {
  #logo{
       width: 100%;
       height: auto;
       //in case you want a max-width-> max-width: 200px;
  }
}

Answer 5

请确保您的网页中包含以下标记

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后添加如下图像

<img src="your image path" alt="" class="heroImage">
    <style>
        .heroImage{width: 100%;max-width: 100%;}
    </style>

移动友好图片

5 个答案: