srcminihttp://www.otislandscapeassociates.com/about/
我正在尝试使用横幅(细枝的横向图像), 但是我很难使它在各种设备(例如台式机, 平板电脑, 移动设备)中做出响应, 而不会拉伸图像或使其无法正确贴合或在任一端被切断。
我想就如何解决这个问题提出一些建议, 如果我需要调整实际图像的尺寸, 它会很大吗？它应该更小吗？等等
我目前正在使用CSS进行所有操作, 因此这是我首选的修改方法。
提前致谢。
#1
你可以试试
background-size: contain;
这是使背景图片具有响应性的最简单方法。但是请注意, 随着宽度随着屏幕宽度的变化而调整, 这也会使图像的高度成比例地减小。
我可以看到你的高度已经固定并且已经使用
background-size: cover;
如果你希望容器自动填充容器, 无论容器大小如何, 通常都会建议这样做。
你不能同时拥有两者(无论容器大小如何, 都不能拉伸且始终填充)。查看图片(与页面融合的空白, 并假设它是必须使用的), 我建议你将其添加到类中, 以使其保持响应状态, 但始终将设计固定在div的底部, 以便始终将其融合到白色以上。让我知道你是否需要任何澄清或问题
background-position: center 100%;
评论前必须登录！
注册