search

mqchen / jquery.diamonds.js

Diamond layout.
http://mqchen.github.io/jquery.diamonds.js/
MIT License
128 stars 69 forks source link

Images are cutted #1

Closed aquanat closed 11 years ago

aquanat commented 11 years ago

Hello,

Before of all let me say that this is the best gallery plugin ever seen. On http://wpuploadimage.com/?p=147 i've tried this jquery plugin but it cut me images: as can you see images are cutted in the lower part.

Is it my problem?

Thanks P.S: As you can see i'm using it on wordpress

mqchen commented 11 years ago

Hi and thanks for your feedback.

It looks like this happens because your images are in a landscape ratio, that is, they are wider than they are tall. This means that the images are not actually cut, but there is a whitespace below them inside each diamond because they are simply not tall enough to fill the diamond.

Here are 2 ways of solving this:

  1. If you know that your images always are in this format (wider than taller), you can simply change your setting on .entry-content img from max-width: 100% to max-height: 100% (Check out the screenshot)
  2. Second choice is to use the css property background-size: cover as I have used on the demo page. This means that you will have to replace your img tags with for example div tags and set background-image on each. Check out the demo page: http://mqchen.github.io/jquery.diamonds.js/

Please let me know if this works for you.

screen shot 2013-10-09 at 11 43 55

aquanat commented 11 years ago

I immediately tried it on localhost and it works! I used the second ways because i don't know images format before. Thanks!