Features Image Type

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    /* general CSS selector */
    zg-cell img {
      height: 25px;
    }

    /* custom class CSS selector */
    .cell-image-large img {
      width: 300px;
    }

    zing-grid[loading] {
      height: 1146px;
    }
  </style>
</head>

<body>
  <zing-grid caption="Cute Cats Weather Forecast" data='[
		    {
		      "day": "Thursday",
		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_one.jpg",
		      "description": "Weather is rainy"
		    },
		    {
		      "day": "Friday",
		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_two.jpg",
		      "description": "Weather is cloudy"
		    },
		    {
		      "day": "Saturday",
		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_three.jpg",
		      "description": "Weather is partly cloudy"
		    },
		    {
		      "day": "Sunday",
		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_four.jpg",
		      "description": "Weather is sunny!"
		    },
		    {
		      "day": "Monday",
		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_five.jpg",
		      "description": "weather is gloomy"
		    }
		  ]'>
    <zg-colgroup>
      <zg-column index="day"></zg-column>
      <zg-column index="description"></zg-column>
      <!-- use inline ZG style on this colum -->
      <zg-column index="imageUrl" type="image" content-style="height: 75px;" header="Small"></zg-column>
      <!-- use custom class on this column -->
      <zg-column index="imageUrl" type="image" cell-class="cell-image-large" header="Large"></zg-column>
    </zg-colgroup>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body>
  <zing-grid caption="Cute Cats Weather Forecast" data='[
		    {
		      "day": "Thursday",
		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_one.jpg",
		      "description": "Weather is rainy"
		    },
		    {
		      "day": "Friday",
		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_two.jpg",
		      "description": "Weather is cloudy"
		    },
		    {
		      "day": "Saturday",
		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_three.jpg",
		      "description": "Weather is partly cloudy"
		    },
		    {
		      "day": "Sunday",
		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_four.jpg",
		      "description": "Weather is sunny!"
		    },
		    {
		      "day": "Monday",
		      "imageUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/cute_cat_five.jpg",
		      "description": "weather is gloomy"
		    }
		  ]'>
    <zg-colgroup>
      <zg-column index="day"></zg-column>
      <zg-column index="description"></zg-column>
      <!-- use inline ZG style on this colum -->
      <zg-column index="imageUrl" type="image" content-style="height: 75px;" header="Small"></zg-column>
      <!-- use custom class on this column -->
      <zg-column index="imageUrl" type="image" cell-class="cell-image-large" header="Large"></zg-column>
    </zg-colgroup>
  </zing-grid>
</body>

</html>

/* general CSS selector */
zg-cell img {
  height: 25px;
}

/* custom class CSS selector */
.cell-image-large img {
  width: 300px;
}