http://www.otislandscapeassociates.com/about/
我正在尝试使用横幅(细枝的横向图像), 但是我很难使它在各种设备(例如台式机, 平板电脑, 移动设备)中做出响应, 而不会拉伸图像或使其无法正确贴合或在任一端被切断。
我想就如何解决这个问题提出一些建议, 如果我需要调整实际图像的尺寸, 它会很大吗?它应该更小吗?等等
我目前正在使用CSS进行所有操作, 因此这是我首选的修改方法。
提前致谢。
#1你可以试试
background-size: contain;
这是使背景图片具有响应性的最简单方法。但是请注意, 随着宽度随着屏幕宽度的变化而调整, 这也会使图像的高度成比例地减小。
我可以看到你的高度已经固定并且已经使用
background-size: cover;
如果你希望容器自动填充容器, 无论容器大小如何, 通常都会建议这样做。
【试图使横幅/图像自动响应】你不能同时拥有两者(无论容器大小如何, 都不能拉伸且始终填充)。查看图片(与页面融合的空白, 并假设它是必须使用的), 我建议你将其添加到类中, 以使其保持响应状态, 但始终将设计固定在div的底部, 以便始终将其融合到白色以上。让我知道你是否需要任何澄清或问题
background-position: center 100%;
推荐阅读
- 更新使用下划线构建的主题
- 暂时绕过WordPress主题注册
- 水平样式化??WordPress小部件
- ice
- Linux学习Linux 安装 JDK 数据库以及环境变量配置
- centos7 xfs 文件系统配置quota 用户磁盘配额
- rsync 同步mac机器目录数据到windows2008R2
- ghld data format
- Docker学习1使用 Linux(CentOS7)搭建 Docker 基础环境