【问题标题】:Properly handling image resizing in web slider正确处理 Web 滑块中的图像大小调整
【发布时间】:2015-07-30 00:13:10
【问题描述】:

我有a web slider,里面有一张图片。我已经要求我的设计师提供我希望支持的最大尺寸的图片(1920x1080 浏览器窗口)。

这在最高分辨率下看起来很棒,但随着浏览器窗口越来越小,图像无法适当缩放。我不确定我应该使用什么技术来确保像上面示例中的图像随着窗口大小的变化而适当地缩小。

我应该向我们的设计师索取同一图像的不同分辨率吗?并使用 css 中的媒体查询换出图像?或者是否有其他方法可以在 CSS 中使用背景图像大小等正确执行此操作?

编辑:

所以图像是用文本和图形创建的。问题可能是无法在各种设备尺寸上支持这一点。其他人/公司如何处理带有文本/图形的图像作为图像的一部分,而不是在图像之上?

【问题讨论】:

    标签: html css image responsive-design


    【解决方案1】:

    尝试将 max-height:100% & max-width:100% 应用于您希望保持缩放的元素。 即

    <div class ="wrapper">
    <div class ="image"> 
    </div>
    </div>
    
    CSS
    .image{
    max-height:100%
    max-width:100%
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-07-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多