How to get div with responsive images to be no non responsive but fluid?

Question

I want to make a layout that shrinks with resizing, with responsive image, but not to stack, I want divs to stay side by side but images to shrink.

This is SO simple I can't really find my answer!

I am using boostrap also with Drupal, so need to overide the xs-* ect classes.

The image below shows what I mean

<p>
  <img alt="" src="http://placehold.it/300/300" style="width: 0 auto; max-width: 50%; margin-right:5px;" />
  <img alt="" src="http://placehold.it/300/300" style="width: 0 auto; max-width: 50%; margin-right:5px;" />
</p>

Since you also use other libraries that may interfere with your style, the you should probably try to make a working more accurate example of you code to represent the problem as it is. — xpy, Mar 22 '16 at 13:10

score 0 · Answer 1 · answered Mar 21 '16 at 08:23

0

It would be great to understand how libraries work internally so that you can use them correctly. In simple CSS, the concept is to use percentage while mentioning width and you will always get them fluid.

So the wrapper div has to be 100% width and the child width should be equal to the width of the wrapper divided by the number of children. In case of 2 children, width will be 50% each.

Responsiveness comes only when you add media queries on top of these. So you would add a CSS like on a particular width, make children 100%. I would suggest you to understand the grid pattern of Bootstrap and then tackle your problem.

answered Mar 21 '16 at 08:23

hkasera

2,118
3
23
32

I understand the grid system, but it's 12 columns, I have odd numbers, and it needs to be centered also, so I dont' want to use push and pull....I just need a very, very basic solution to do this...and the divs have to stay in the center also – Bruno Vincent Mar 21 '16 at 08:28
Can you add a snippet of the CSS that you are currently using? – hkasera Mar 21 '16 at 08:34
– Bruno Vincent Mar 21 '16 at 08:42

score 0 · Answer 2 · answered Mar 23 '16 at 03:43

This code worked:

<div style="width:80%; margin: 0 auto;">

<div style="width:33.3333%; float:left;"><img class="img-responsive" src="OmegaT.png" style="margin: 0 auto;" /></div>

<div style="width:33.3333%;  float:left;"><img class="img-responsive" src="poedit.png" style="margin: 0 auto;" /></div>

<div style="width:33.3333%; float:left;"><img  class="img-responsive" src="trados.png" style="margin: 0 auto;" /></div>
</div>

score 0 · Answer 3 · answered May 05 '16 at 14:46

I got it figured out.

I am using Drupal 7 and boostrap.

Problem is that even if the Drupal has the boostrap template set to default, not EVERYTHING is boostrap.

Some stuff gets overidden, causing all sorts of issues.

The solution is to have ALL content using boostrap modules, like bootstrap views, boostrap display suite ect...

So the problem really was a Drupal issue.

How to get div with responsive images to be no non responsive but fluid?

3 Answers3