1.0.14 • Published 8 years ago
image-block v1.0.14
ImageBlock
ImageBlock is a dead-simple way to use an <img> element like you would background-size: cover;.
Why Use ImageBlock?
There are numerous reasons to use ImageBlock:
- You want responsive background images
- You want to use an
altattribute with a background image - You want to use the
transformproperty with a background image
Dependencies
- jQuery
Quick Start
Getting started is ridiculously easy:
- Make sure you have jQuery.
- Include the
distfiles,image-block.jsandimage-blocks.css. - Put an
img.image-block-bginside adiv.image-block. - Put a
.image-block-contentafter theimg.image-block-bg(optional).
Note: to render properly, .image-block must either:
- Have a defined width or height
- Contain an
.image-block-contentwith inner content.
For example:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>ImageBlock</title>
<link rel="stylesheet" href="/css/image-block.css">
<style>
html, body, .image-block {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="image-block">
<img class="image-block-bg" src="https://placehold.it/1600x1600" alt="placeholder">
<div class="image-block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/js/image-block.js"></script>
</body>
</html>Advanced Configuration
If you'd like to go a bit further, follow these steps to reduce the total number of HTTP requests and improve your workflow.
First, install ImageBlock via NPM:
npm install image-block --saveFrom there, you can import the src files in JavaScript and Sass:
window.jQuery = require('jquery')
require('image-block')@import "node_modules/image-block/src/sass/image-blocks"And that's it!