<input type="radio" name="size" id="desktop" checked >
 <input type="radio" name="size" id="mobile" >
 <input type="radio" name="size" id="original" >
<nav>
 <label id="desktop_b" for="desktop">Desktop</label>
 <label id="mobile_b" for="mobile">Mobile</label>
 <label id="original_b" for="original" >Original</label>
</nav>

<div class="screen"><img src="http://montaycabe.com/css_tricks/[email protected]"></div>
<div class="screen"><img src="http://montaycabe.com/css_tricks/[email protected]@l.jpg"></div>
<div class="screen"><img src="http://montaycabe.com/css_tricks/[email protected]"></div>
/*---- demo  interfaz --*/
nav{
  position:fixed;
  z-index:9;
  background:rgba(255,255,255,0.5)
}
input{
  display:none;
}
label{
 font-family:arial, helvetica, roboto, sans-serif;
  padding: 0.2em 1em;
  margin:0.5em;
  display:inline-block;
}
.screen{
  box-sizing:border-box;
  height:667px;
  width:375px;
  background:#ccc;
  overflow:hidden;
  transition:all linear 0.3s;
  padding:1em;
  margin:1em 2em;
  border-radius:1em;
  padding-bottom:6em;
  position:relative;
  display:inline-block;
}

#desktop:checked ~ .screen{
  width:667px;
  height:375px;
  padding-right:6em;
  padding-bottom:1em;
}

#original:checked ~ .screen{
  padding:0;
  border-radius:0;
  width:45%;
   margin:1%;
  height:auto;

}
#original:checked ~ .screen img{
  height:auto;
}
#desktop:checked ~ nav #desktop_b,
#mobile:checked ~  nav #mobile_b,
#original:checked ~ nav #original_b{
 background: rgba(255, 0, 0, 0.5);
  color:#fff;
}

/*---- plot of the article --*/
.screen img{
  transition:all linear 0.3s;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  --originx: center;
  --originy: center;
  object-position:var(--originx) var(--originy);
}
.screen img[src *= "@r"]{
 --originx: right;
}
.screen img[src *= "@l"]{
 --originx: left;
}
.screen img[src *= "@t"]{
 --originy: top;
}
.screen img[src *= "@b"]{
 --originy: bottom;
}

/*--images from:
https://pixabay.com/photos/plane-flight-sky-2662098/
https://pixabay.com/photos/macro-beetle-insect-coleoptera-3447753/
https://pixabay.com/photos/dog-smooth-fox-terrier-terrier-1308948/
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.