移动响应不同设备的确切横幅图像大小

Question

如何处理针对中小型手机和平板电脑等不同设备的横幅图片响应。？

Answer 1

您可以使用 bootstrap 框架。添加 img-responsive class 到 image

<img src="1.jpg" class="img-responsive" alt="image" > 

Answer 2

还要看你的形象，你的形象主要内容占满了吗space？有什么可以剪的吗？如果是这样的话，你可以用object-fit，object-position来实现，宽高不会变化太大。 如果你可以自己修改图片，使用img srcset 属性，你可以指定在不同分辨率的断点显示哪个图片。 如果 none 前面的选项适合你，试试 vmax，你会很高兴猜测正确的措施，但一旦完成，你就不需要太多的媒体查询 最后，还有繁琐的方法，设置各种媒体查询。

Answer 3

1. Width:

.banner
{
    max-width: 100%;
    height: auto;
}

2. Media Query:

    @media only screen and (min-width: 960px) {
        .banner
        {
          width: 960px
          height: auto;
        }
    @media only screen and (min-width: 1440px) {
        .banner
        {
          width: 1440px
          height: auto;
        }
    }
    @media only screen and (min-width: 2000px) {
        .banner
        {
          width: 2000px
          height: auto;
        }
    }
    @media only screen and (max-device-width: 480px) {
       .banner
        {
          width: 480px
          height: auto;
        }
    }
    @media only screen and (device-width: 768px) {
       .banner
        {
          width: 768px
          height: auto;
        }
    }