CSS or jQuery on rails / How to “fill frame” with an image?


Tags: ruby-on-rails,css,image,scaling

Problem :

Whats the best technique for doing something like "fill frame" in indesign .. meaning take the image and scale the shortest side so it fits, then clipping the rest?

Is this possible with pure CSS ?

I am using Rails with jQuery..

The code could be something like this:

<div class="image_container"><img class="image" src=""></div>


Solution :

You can do it, if you had fixed size of image_container:

.image_container{
  width:200px;
  height:100px;
  overflow:hidden;
}

.image_container img{width:200px;}

This will scale image by width and hide by height.


    CSS Howto..

    How to position div inside middle of navbar?

    How to appy font color from li:hover to inner a link text using CSS

    How to create such (see image below) effect using pure HTML JS and CSS?

    Bootstrap - how to make the image being scaled down to fit the window height?

    How can I make all table cell sizes the same width in css?

    How to make a blur effect over a shape in CSS?

    How can I completely cancel a class when a CSS media style is used?

    Show bottom of an overflow string in a div with fixed height/width?

    How to create a progress bar

    How to use Bootstrap CDN?

    How to apply css style to custom attributes

    How to mail HTML/CSS output as attachment?

    How to size relative div which haven't a content?

    meteorjs how to import a wrapbootstrap theme

    how to use namespaces in css?

    How to make slanted ribbon

    How to draw lines in ionic

    How to use pure CSS to show an animation of one element's background and color property?

    How to test .css file for syntax errors?

    How to apply css to a dynamically created div?

    How Do I Limit Scrolling to a Fixed Div?

    How to set stylesheet programmatically in an ASP.NET MVC 2 project?

    how to make the navbar fixed to top

    How to adjust the length of input

    On DropDown/HTML Select Show Modal PopUp

    How the browser identifies the CSS framework? [closed]

    How to change table width using css

    How to refactor CSS based on HTML class

    How to make a sudoku grid using HTML and CSS?

    How to accurately position divs with css