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

【问题标题】：Exact banner image size for mobile responsive for different device针对不同设备的移动响应的确切横幅图像大小
【发布时间】：2020-04-30 20:38:30
【问题描述】：

如何处理适用于中小型手机和平板电脑等不同设备的横幅图像响应？

【问题讨论】：

使用媒体查询根据您的需要调整它们的大小。
使用媒体查询或使用引导来制作响应式网站

标签： html css responsive-design media-queries

【解决方案1】：

宽度：

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

媒体查询：

    @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;
        }
    }

【讨论】：

感谢您的回复

【解决方案2】：

您可以使用引导框架。为图片添加 img-responsive 类

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

【讨论】：

@ArumugamG 如果您想要完整的响应式网站，最好使用引导程序
当然@Syam lal 也会这样做，你能推荐一些参考学习网站来开发响应式网站

【解决方案3】：

这也取决于你的形象，你的形象的主要内容是否占据了所有的空间？有什么可以剪掉的吗？如果是这样的话，你可以通过object-fit，object-position来实现它，并且宽度和高度不会变化太大。如果您可以自己修改图像，请使用 img srcset 属性，您可以在其中指定应在不同分辨率断点中显示的图像。如果以前的选项都不适合您，请尝试使用 vmax，您会很高兴猜测正确的措施，但一旦完成，您将不需要太多媒体查询最后是繁琐的方式，设置各种媒体查询。

【讨论】：