How to place images using jQuery masonry plugin to start

0 votes

Trying to create a simple image gallery for images of varying height/width and ran into masonry in search of a plugin that does something like that.

I was trying to do a mockup of this based on other example of empty box layout on masonry but I can't figure out how you would do this to place image in these boxes.

http://jsfiddle.net/zigzag/kz2b79s3/

This is how I organized one tile:

 <div class="item"> <img src="https://www.mulierchile.com/random-image/random-image-001.jpg"> </div>

As you can see in the fiddle, the image is 'bleeding' out instead of being contained in the box. Must have missed something silly here.

Jun 22 in Web Development by gaurav
• 18,040 points
12 views

1 answer to this question.

0 votes

You were just missing a css class that adjusts the image according to its parent container

.item img {
  display: block;
  width: 100%
}
answered Jun 22 by rajatha
• 7,040 points

Related Questions In Web Development

0 votes
1 answer

How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

The jQuery fadeIn() method is used to ...READ MORE

answered Jun 29 in Web Development by rajatha
• 7,040 points
17 views
0 votes
1 answer

how to add erroricon and custom validation message using jquery?

By default, the error message is put ...READ MORE

answered Jun 30 in Web Development by rajatha
• 7,040 points
81 views
0 votes
1 answer

How to change an element's title attribute using jQuery

You can change the title attribute with ...READ MORE

answered Jun 30 in Web Development by rajatha
• 7,040 points
26 views
0 votes
0 answers

How to check radio button is checked using JQuery?

I have two radio buttons in one ...READ MORE

Jun 29 in Web Development by gaurav
• 18,040 points
13 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
8,902 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
15,898 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,740 points
1,306 views
0 votes
1 answer

How to create a simple map using JavaScript/JQuery

var map = new Object(); // or ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
21 views
0 votes
1 answer

How to alert using jQuery

alert($('#test')); // or alert($('#test'). get(0)); // also try alert(document. ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
21 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP