Blurry images

by Annemarie Köhler

HTML

<div class="box">
  <div>width: 240px</div>
  <div>3,5x resized to width: 240px</div>

  <div>
    <img src="https://lesen.cornelsen.de/assets/student/avatars/[email protected]">
  </div>
  <div>
    <img src="https://lesen.cornelsen.de/assets/student/avatars/04@3,5x.png" class="smaller">
  </div>
</div>

CSS

.smaller {
  width: 300px;
}

div {
  text-align: center;
}

.box {
  display: grid;
  grid-template-columns: 1fr 1fr;
}