Bootstrap 4中如何避免不同分辨率下重复引入Logo图片？

当然能搞定！你这重复写两个<img>标签的做法确实有点冗余，其实只用一行代码就能把这个逻辑合并，既保持响应式效果，又让代码干净很多：

如果你是用同一个Logo图片（只是分断点控制显示/隐藏） #

原来的两个标签一个负责xs尺寸显示、另一个负责sm及以上显示，合起来就是全断点都显示，直接用最基础的img标签就行：

<img src="你的Logo文件路径" alt="网站Logo" class="img-fluid">

（加img-fluid是让Logo自动适配容器宽度，更贴合响应式需求）

如果是有特殊需求（比如某个中间断点要隐藏），就用Bootstrap的d-*响应式类组合控制，比如要实现「仅xs显示、sm隐藏、md及以上显示」：

<img src="你的Logo文件路径" alt="网站Logo" class="d-block d-sm-none d-md-block img-fluid">

如果你是用不同尺寸的Logo（移动端/桌面端用不同图） #

要是原来的两个标签是加载不同大小的Logo（比如移动端用小图、桌面用大图），那用srcset属性就能在一行代码里实现响应式加载，不用重复写标签：

<img src="logo-mobile.png" alt="网站Logo" srcset="logo-mobile.png 320w, logo-desktop.png 768w" sizes="(max-width: 576px) 100vw, (min-width: 576px) 100vw" class="img-fluid">

浏览器会根据当前屏幕宽度自动选择加载对应的图片，既省流量又保证显示效果。

另外提一句：Bootstrap 4+已经弃用了hidden-*和visible-*类，现在统一用d-none/d-block这类前缀为d-的显示类，你原来的hidden-xs-down对应d-none d-sm-block、visible-xs对应d-block d-sm-none，用这些新类在单个标签上组合就完全能替代原来的两个重复标签啦。

内容的提问来源于stack exchange，提问作者gringogordo