center_image_tag: Center your images with pure css

center_image_tag is another tag helper for Rails app which helps to center your image in its parent element view. center_image_tag will help you to display the center (middle) portion of your image as below (red box):

Flower

It has the same arguments as image_tag, so you can easily integrate this into your current Rails app.

center_image_tag has a built-in fluid mode which would buy you some time to center the images in your responsive design. Otherwise, just set fixed width and height as in image_tag, you can also have images auto-centered with the set dimension.

Installation

Add this line to your application's Gemfile:

gem 'center_image_tag'

Then import center_image_tag in an SCSS file (for example, application.css.scss):

@import 'center_image_tag';

Options

center_image_tag has the same options as image_tag helper and adds 2 more options to the option hash:

fluid: set the image to be autoscaled with its parent. See 'Fluid mode' section below for details.
container_class: css classes to the outer container of center_image_tag. See 'Container class' section below for details.

Modes of operation

center_image_tag has 2 modes of operation which are mutually exclusive, i.e. can't use at the same time, so try to pick up the best mode that fits your need.

Fluid mode

center_image_tag can display the image which will auto scale with its parent element. The percentage between height and width of the image needs to be set:

center_image_tag 'http://yoursite/image.png', fluid: '56.25%'

Fixed width and height mode

center_image_tag can display the image whose width and height are fixed:

center_image_tag 'http://yoursite/image.png', size: '200x100'

center_image_tag 'http://yoursite/image.png', size: '100'

center_image_tag 'http://yoursite/image.png', width: 200, height: 100

You can notice that these options are exactly the same as the image_tag helper.

Container class

center_image_tag uses a nested div tags to make your image center. container_class option will help to add css classes to the outer container generated by center_image_tag, for example:

center_image_tag 'http://yoursite/image.png', fluid: '56.25%', container_class: 'my-custom-class'
# => 
# <div class="... my-custom-class">
#   ...
#   <img src="http://yoursite/image.png" />
#   ...
# </div>

With this option, it can help in the case you need to add more styles or override the current styles of the generated container, e.g. make the image inline.

Fallback

In the case that

`fluid' option is NOT set, AND
both width and height are NOT set (throught size option or width/height options)

center_image_tag will fall back to normal image_tag

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request