Resize image

examples/csses/media-query-images-resizing.html

<html>
<head>
<title>Media Query: Images</title>
<link rel='stylesheet' href='images-resizing.css' />
</head>
<body>
<div id="city-view">
<img src="../img/austin-yapc-1280x716.jpg" alt="Austin"/>
</div>
</body>
</html>

examples/csses/images-resizing.css

#city-view {
  border: solid;
}


@media (min-width: 1281px) and (min-height: 800px) {
}

@media (min-width: 800px) and (max-width: 1280px) {
  img {
     width: 700px;
  }
}

@media (max-width: 799px) {
  img {
    visibility: hidden;
    /* display: none; */
  }
}