I know this may have already duplicated, but I tried many of the solutions on the internet and still doesn’t work. I have two pictures that wishes to appear in different screen sizes. However, the CSS command picture for smaller screen (767px and below) does not seem to work.

I would be so grateful if you could help out a newbie here. Thank you.

        @media only screen and (min-width: 768px) {
            img{
                border-top-left-radius: 30px;
                border-bottom-left-radius: 30px;
            }
        }

        @media only screen and (max-width: 767px) {
            #loginPicXs{
                border-top-left-radius: 30px;
                border-top-right-radius: 30px;
            }
        }

                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                    <picture>
                        <source media="(max-width: 767px)" id="loginPicXs" srcset="loginformpic_sm_xs.jpg">
                        <img src="loginformpic.jpg" class="img-responsive">
                    </picture>
                </div>

>Solution :

According to HTML spec, picture can only contain one img element. Though you can hide one, but it is not advisable.

https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

You need to use two img elements: one for desktop and one for mobile.

Hide the mobile version when viewport width is more than 768px and hide the desktop version when viewport width is less than 768px.

@media only screen and (min-width: 768px) {
  #pc-image {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
  #mobile-image {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  #pc-image {
    display: none
  }
  #mobile-image {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
  <img src="loginformpic.jpg" class="img-responsive" id="pc-image">
  <img src="loginformpic_sm_xs.jpg" class="img-responsive" id="mobile-image">
</div>

You may use figure instead of div.

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

<figure class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
  <img src="loginformpic.jpg" class="img-responsive">
  <img src="loginformpic_sm_xs.jpg" class="img-responsive">
</figure>

figure {
  margin: 0
}

@media only screen and (min-width: 768px) {
  img:last-child {
    display: none;
  }
  img:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
}

@media only screen and (max-width: 767px) {
  img:first-child {
    display: none
  }
  img:last-child {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}