CSS for auto-stacking photo galleries - css

I am hoping this is the correct SE forum for this question. I'd like to know what CSS can be used to stack photographs (bunch of img tags) so that they're auto-adjusted in width and height on every device screen size. An example is here: www.edwardkb.com/places/ but it's a SquareSpace template so I don't what script or CSS they use. Thank you!

if you use bootstrap 3 , just add img-responsive class in your img tag
<img class="img-responsive" src="...">
if you use bootstrap 4, add img-fluid class in your img tag
<img class="img-fluid" src="...">

Related

How to set two images with link inline

I would like to set two images inline with CSS, but the CSS should be in the HTML element, not in a separate style.css file.
Like this :
<ul style="display: inline">
<li>image</li>
<li>image</li>
</ul>
I would like to add more images on this page http://www.top20broker.com/eco-calender/ beside the video corner image.
If you want to set two images in one line you can do it as follows:
<div style="display:inline"><img src="pic1.jpg" /></div>
<div style="display:inline"><img src="pic2.jpg" /></div>
The first image should be rapped in a div element with display: inline.
if what you need is to have two images side by side in the same line, if the container is large enough you shouldn't need any special code because IMG tags work like an inline-block element.
<img src='http://placehold.it/250x130'>
<img src='http://placehold.it/250x140'>

can we make some images unresponsive i.e. no effect of re-sizing of browser window in a bootstrap responsive site? I can't find any thing?

can we make some images unresponsive i.e. no effect of resizing of browser window in a bootstrap responsive site?
I can't find any help?
Images in Twiiter Bootstrap are not responsive unless appended with the class img-responsive so just remove that class from the img tag and the image will not be responsive.
RESPONSIVE:
<img src="someImage.jpg" class="img-responsive" alt="image" />
NON-RESPONSIVE:
<img src="someImage.jpg" alt="image" />

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

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
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>
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.
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>
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.

In bootstrap how to fit Image Automatically to All MobileDevice

In bootstrap css how does one fit an image or video automatically to all mobile devices based on its Resolution.
For images, use Bootstrap's Responsive Images functionality. For video or embedded content, use Bootstrap's Responsive Embed to preserve the aspect ratio.
Example (JS Fiddle):
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/%C3%84lvkarleby_June_2013.jpg/800px-%C3%84lvkarleby_June_2013.jpg" class="img-responsive">
<hr>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="responsive-embed" src="https://www.youtube.com/embed/SirRu8mf3II" >
</iframe>
</div>

Boostrap - Accounting for different sized thumbnails in a single row

Most times when I'm using thumbnails the heights of the image are not uniform, as shown below:
<ul class="thumbnails">
...
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x270" alt="">
</a>
</li>
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/360x240" alt="">
</a>
</li>
...
</ul>
I have also created a simple jsFiddle showcasing the problem here: http://jsfiddle.net/c49Tk/
So, how can I force all of my thumbnails to share the exact same height and change their width, ignoring and maintaining the aspect ratio?
There isn't a simple answer to this one I'm afraid.
The way Bootstrap works, it assigns max-width: 100% to img. In the example you're sharing, they are all being retained by their parent's width (span4). In the same vein, the parents are getting their height from the image, so you can't even set the images to min-height: 100%.
If possible, you could resize these images server-side, although that's not exactly the answer you're looking for!
You could use JavaScript to force the heights of the images (although you would also need to force-remove the max-width property), but this would mean that you no-longer get the grid from Bootstrap that you're using.
I expect that with a little more JavaScript, you could:
Set the parent (either the anchors or the lis) to overflox-x:
hidden;
force the images to all be the same height.
This will mean that all your images are equal-height, but you would loose the right-hand edge of any images that are wider..
One final option would be to simply force the image heights and widths via CSS, although that would also mean that you would loose the image aspect ratio.
One good piece of news though: as long as you use class="row" or class="row-fluid", they will at least be cleared property, so if you have several rows of them you won't get nasty float-edge issues even if the images aren't equal-height.
You can use a CSS class to force it like
img { width: 200px; height: 200px; }

Resources