css - 避免不同分辨率的重复图像 (bootstrap 4)

Question

您好，我有一个工作站点，其中包含两次不同分辨率的不同类别的 Logo

<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>

这看起来没问题，并且按照锡 jar 上的说明进行操作 -

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

• visible-xs(仅)= 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>