Platzhalterbilder/Placeholder images

index.html

<h1>Overview of placeholder-image services | Übersicht von Platzhalterbilder-Diensten</h1>
<!-- Übersicht: https://www.paulund.co.uk/image-placeholder-apis -->
<ul class="imageservicelist">
  <li>
    <h2><a href="http://unsplash.it">Unsplash.it</a></h2>
    <img class="flexible" src="http://unsplash.it/400/300" alt="Unsplash.it" />
  </li>
  <li>
    <h2><a href="http://lorempixel.com/">Lorem Pixel</a></h2>
    <img class="flexible" src="http://lorempixel.com/400/300/" alt="Lorem Pixel" />
  </li>
  <li>
    <h2><a href="http://lorempizza.com/">lorempizza</a></h2>
    <img class="flexible" src="http://lorempizza.com/400/300" alt="lorempizza" />
  </li> 
  <li>
    <h2><a href="http://placehold.it/">Placehold.it</a></h2>
    <img class="flexible" src="http://placehold.it/400x300" alt="Placehold.it" />
  </li>

  <li>
    <h2><a href="http://placeimg.com/">PlaceIMG</a></h2>
    <img class="flexible" src="http://placeimg.com/400/300" alt="PlaceIMG" />
  </li>
    <li>
    <h2><a href="http://placebeer.com/">placebeer.com/</a></h2>
    <img class="flexible" src="http://placebeer.com/400/300" alt="placebeer" />
  </li>
  <li>
    <h2><a href="http://www.fillmurray.com">fillmurray.com</a></h2>
    <img class="flexible" src="http://www.fillmurray.com/400/300" alt="fillmurray" />
  </li>
  <li>
    <h2><a href="http://placecage.com/">placecage</a></h2>
    <img class="flexible" src="http://placecage.com/400/300" alt="placecage" />
  </li>
  <li>
    <h2><a href="http://stevensegallery.com/">stevensegallery</a></h2>
    <img class="flexible" src="http://stevensegallery.com/400/300" alt="stevensegallery" />
  </li>


  <li>
    <h2><a href="http://dummyimage.com/">Dummy Image</a></h2>
    <img class="flexible" src="http://dummyimage.com/400x300" alt="Dummy Image" />
  </li>
  <li>
    <h2><a href="http://placeskull.com/">Place Skull</a></h2>
    <img class="flexible" src="http://placeskull.com/400/300/" alt="Place Skull" />
  </li>
  <li>
    <h2><a href="http://pipsum.com/">pipsum</a></h2>
    <img class="flexible" src="http://pipsum.com/400x300" alt="pipsum" />
  </li> 
  <li>
    <h2><a href="https://cageme.herokuapp.com/">Cageme</a></h2>
    <img class="flexible" src="https://cageme.herokuapp.com/400/300" alt="pipsum" />
  </li>  
  <li>
    <h2><a href="http://p-hold.com/">P-Hold</a></h2>
    <img class="flexible" src="http://p-hold.com/400/300" alt="p-hold" />
  </li>
  <li>
    <h2><a href="https://spaceholder.cc/">Space Holder</a></h2>
    <img src="https://spaceholder.cc/400x300" alt="" class="flexible" />
  </li>
  <li>
    <h2><a href="http://lorempicsum.com/">Lorempicsum (Find Nemo)</a></h2>
    <img src="http://lorempicsum.com/nemo/400/300/1" alt="" class="flexible" />
  </li>

  <li>
    <h2><a href="http://lorempicsum.com/">Lorempicsum (Futurama)</a></h2>
    <img src="http://lorempicsum.com/futurama/400/300/1" alt="" class="flexible" />
  </li>

  <li>
    <h2><a href="http://lorempicsum.com/">Lorempicsum (Rio)</a></h2>
    <img src="http://lorempicsum.com/rio/400/300/1" alt="" class="flexible" />
  </li>
  <li>
    <h2><a href="http://lorempicsum.com/">Lorempicsum (the Simpsons)</a></h2>
    <img src="http://lorempicsum.com/simpsons/400/300/1" alt="" class="flexible" />
  </li>

  <li>
    <h2><a href="http://lorempicsum.com/">Lorempicsum (Up / Oben)</a></h2>
    <img src="http://lorempicsum.com/up/400/300/1" alt="" class="flexible" />
  </li>
  <li>
    <h2><a href="http://placekitten.com">PlaceKitten</a></h2>
    <img class="flexible" src="http://placekitten.com/399/300" alt="Place Kitten" />
  </li>
  <li>
    <h2><a href="http://baconmockup.com">Bacon Mockup</a></h2>
    <img class="flexible" src="http://baconmockup.com/400/300" alt="Bacon Mockup" />
  </li>
    <li>
    <h2><a href="http://placebear.com/">Placebear</a></h2>
    <img class="flexible" src="http://placebear.com/400/300" alt="Placebear" />
  </li>
  <li>
    <h2><a href="http://facetheforce.today/">FaceTheForce.today</a></h2>
    <img class="flexible" src="http://facetheforce.today/random/300?r=1" alt="Face the Force" />
  </li>
  <li>
    <h2><a href="https://picsum.photos/">Lorem Picsum</a></h2>
    <img src="https://picsum.photos/400/300" alt="" class="flexible">
  </li>
  <li>
    <h2><a href="https://loremflickr.com/">Loremflickr</a></h2>
    <img src="https://loremflickr.com/4000/300/cat" alt="" class="flexible">
  </li>
  <!--  li>(h2>a)+img.flexible -->
</ul>

platzhalterbilder-placeholder-images.markdown

Platzhalterbilder/Placeholder images

A Pen by Jens Grochtdreis on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.imageservicelist {
  list-style-type: none;
  overflow: hidden;
}
.imageservicelist li { 
  background: #eee; 
  margin: 0 20px 20px 0;
  float: left;
  width: 30%;
}
.imageservicelist h2 a { 
  color: #a20000;
  padding: 10px;
}

.flexible {
  width: auto;
  height: auto;
  max-width: 100%;
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics_3.css" rel="stylesheet" />