避免重复图像的不同分辨率（bootstrap 4）

Question

您好我有一个工作网站，其中包含两次不同类别的徽标，用于不同的分辨率

<a class="navbar-brand" href="/">
<img class="d-none d-sm-block" width="279" height="70" src="logo.png">
<img class="d-block d-sm-none" width="232" height="58" src="logo.png">
#</a>

这似乎没问题，并且在锡上做了什么 -

• hidden-xs-down = d-none d-sm-block

• visible-xs（only）= d-block d-sm-none

但有点不整洁，我被要求摆脱重复的图像。有没有办法在一行中做到这一点？

Answer 1

你需要CSS媒体查询，但不能内联。

.navbar-img {
  width: 232px;
  height: 58px;
}

@media screen and (min-width: 767px) {
  .navbar-img {
    width: 279px;
    height: 70px;
  }
}

<a class="navbar-brand" href="/">
  <img class="navbar-img" src="http://lorempixel.com/400/200/cats">
</a>