A Pen by Chris Barr

Thumbnail
This awesome code was written by chrismbarr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrismbarr ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Chris Barr</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  resize page to see images scale. Ideally, the image element should be the same size regardless if it has a src set or not. This will allow easier layout when lazy-loading images.
<hr />

<div class="container" style='max-width: 500px; max-height: 700px;'>
  Image with a source
  <img src="http://lorempixel.com/500/700/cats/2/" width="500" height="700" />
</div>

<div class="container" style='max-width: 500px; max-height: 700px;'>
  Image with no source
  <img src="" width="500" height="700" />
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/chrismbarr/a-pen-by-chris-barr-xGgGRq */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
  height: 100%;
}

.container {
  background: #CCC;
  display: inline-block;
  width: 40%;
  margin: 0 5%;
  float: left;
}
.container img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
}

Comments