CODEWITHSUNDEEP
cssbootstrap-4
gringogordo
gringogordo

Reputation: 2130

Avoid a repeating image for different resolutions (bootstrap 4)

Hi I have a working site with a logo included twice with different classes for different resolutions 

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

This seems okay and does what it says on the tin -

but is a bit untidy and I've been asked to get rid of the repeating image. Is there a way to do this in one line ?

Upvotes: 0

Views: 19

Answers (1)

Phiter
Phiter

Reputation: 14982

You'll need CSS media queries for that, but it cannot be done inline.

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

Upvotes: 1

Related Questions