Multiple images fill screen width using CSS - html

I have multiple images to show in a row that filled screen width:
<img src="1.jpg" style="max-width:25%">
<img src="2.jpg" style="max-width:25%">
<img src="3.jpg" style="max-width:25%">
<img src="4.jpg" style="max-width:25%">
In some pages I have 4 images but some have 5, 6, etc.
I don't want to change max-width for every pages so is that a way in CSS to take care of it?
p.s. I don't want to use table and background-image since a js plugin need find them as img, also img tag is google-friendly too...

I'd suggest you to use flexbox. It's really useful and can be mastered to make almost any kind of grid you want. Wrap all images in container class with display:flex and for each img element set flex:1. This is the simplest way. If you need to adjust it, read about it, it's great! Example here
.flexContainer {
display:flex;
max-height:200px;
}
.flexContainer > img {
flex:1;
border:1px solid;
margin:1px;
}
<div class="flexContainer">
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
</div>
<br/>
<div class="flexContainer">
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
</div>

There is no pure CSS way to solve it. Little jQuery can do it for you:
$(parentElem).each(function() {
var itemsCount = $(this).children().length;
var childrenWidth = 100 / itemsCount + '%';
$(this).children().css('width', childrenWidth);
});
where parentElem is container for your images. jQuery each loop here in case you have multiple rows with images on your page.

Related

CSS-only selection query to hide HTML element If another element has content

The CSS / HTML work I am doing is for an HTML template for eBay. As such, I am unable to use any active content (JavaScript, etc.) which seems to be the easiest way to do this.
The software I am using that fills the template works with tags, in this case {{PARENTIMAGEURL1}} and {{CHILDIMAGEURL1}}. When the tag is not present, the element remains with an empty src attribute.
I need to tweak an image section of the template in such a way that if there is a parent image present, the child image is hidden. There will always be a child image available, so the function does not need to work in reverse.
The HTML for the section is as follows:
<div class="main-image">
<img src="{{PARENTIMAGEURL1}}" alt="Main Image" class="img-responsive">
<img src="{{CHILDIMAGEURL1}}" alt="Main Image" class="img-responsive">
</div>
Is it possible to use the :empty selector to hide the image with the child URL if the parent is present? I'm seeing pretty limited documentation as far as how that might work with a media query.
Any assistance would be much appreciated.
There are two ways you can do this. The first would be to rely on the DOM structure.
DOM structure method
You can use the CSS + selector to select an element that is the very next sibling of another element: in this case, the child image.
So if there's a parent and child image, the child image will be hidden:
.main-image img + img {
display: none;
}
<div class="main-image">
<img src="http://placehold.it/200x200" alt="Main Image" class="img-responsive">
<img src="http://placehold.it/200x200" alt="Main Image" class="img-responsive">
</div>
Otherwise, the selector will have no effect, and the only image you've got will show up:
.main-image img + img {
display: none;
}
<div class="main-image">
<img src="http://placehold.it/200x200" alt="Main Image" class="img-responsive">
</div>
Attribute selection
However, if your template is going to not actually remove the parent image but simply make its source empty (i.e., src=""), you can get a bit more creative.
Version one
Here's one approach:
First, hide all parent images
Then, if the parent image has a source that's not empty, show it
If the parent image has a source that's not empty, hide the next image after it (its child image)
It's doing #2 that is the tricky part. You can use an attribute selector to read the image's src, but you need some fragment that will be true all the time, so the style doesn't fail.
In the example below, since all the URLs are from placehold.it, I have included img[src*="placehold"], but your actual solution may look something more like this:
img[src*=".jpg"],
img[src*=".png"],
img[src*=".gif] {
display: block;
}
.main-image img:nth-child(1) {
display: none;
}
.main-image img[src*="placehold"]:nth-child(1) {
display: block;
}
.main-image img[src*="placehold"]:nth-child(1) + img {
display: none;
}
<div class="main-image" style="background: firebrick">
<img src="" alt="Parent Image" class="img-responsive">
<img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>
<div class="main-image" style="background: midnightblue">
<img src="http://placehold.it/200x300?text=Parent+image" alt="Parent Image" class="img-responsive">
<img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>
Version two
Here's another approach based on a combination of an attribute selector and the :not pseudo selector:
/* hide all parent images with no source */
.main-image img[src=""]:nth-child(1) {
display: none;
}
/* hide all child elements following a parent element that does have a source */
.main-image img:not([src=""]) + img {
display: none;
}
.main-image img[src=""]:nth-child(1) {
display: none;
}
.main-image img:not([src=""])+img {
display: none;
}
<div class="main-image" style="background: firebrick">
<img src="" alt="Parent Image" class="img-responsive">
<img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>
<div class="main-image" style="background: midnightblue">
<img src="http://placehold.it/200x300?text=Parent+image" alt="Parent Image" class="img-responsive">
<img src="http://placehold.it/200x300?text=Child+image" alt="Child Image" class="img-responsive">
</div>

How to lay 2 images side by side in html?

This is my current code:
<figure class="half">
<img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
<img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
<figcaption>Caption describing these two images.</figcaption>
</figure>
Unfortunately perhaps because the images are too wide, it still puts the second image on the next line. I want to avoid this - no matter how wide things get. How can I do this?
Just add css display:flex to parent container of images in your case figure.
<figure class="half" style="display:flex">
<img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
<img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
<figcaption>Caption describing these two images.</figcaption>
</figure>
You could put your images into table cells.
<figure class="half">
<table>
<tr>
<td>
<img style="width:400px;" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
</td>
<td>
<img style="width:600px;" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
</td>
</tr>
</table>
<figcaption>Caption describing these two images.</figcaption>
</figure>
I recommend just using a <span> tag and put no space in between them, then they will be side by side.
This could be achieved in many ways.
You could use flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could wrap it grid system and set image width to 100% or create table and set width of each td to be 50%
You can even set css for all of your images to be exactly the same size.
I've created a little fiddle for you https://jsfiddle.net/7kophdxq/.
I would strongly recommend using flexbox, since its the 'new way' of doing these kind of things. Of course you could use a table, but it isn't tabular data right?
For the general structure:
<div class="columns">
<div class="columns__item"></div>
<div class="columns__item"></div>
</div>
Each columns__item has a width of 50%. Inside each columns__item I've put a little image (and made sure it will not exceed a width of 100% of its container):
<figure>
<img src="http://lorempixel.com/400/400/" />
<figcaption>Image caption</figcaption>
</figure>
Hope it helps!
.half img {
display:inline-block;
}
.half figcaption {
display:block
}
or, if you want to keep images in one line, regardless the container size:
.half {
white-space:nowrap;
}
.half img {
display:inline;
}
.half figcaption {
display:block
}
Pick whatever suits you best;)

Apply different margins on images in a single div

Please consider the jsfiddle demo where I've laid out 7 cards with transform effects.
Now I would like to apply a different margin to individual images such that the card2 is for example 15px lower, card3 is 5px higher etc.
However, when I apply for example margin-top: 15px to card2, all cards in the div are rendered with margin-top: 15px
Another issue is that the centered div is not really centered when applying width: 100% to it.
<div class="centered">
<div class="container">
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card1" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card2" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card3" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card4" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card5" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card6" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card7" />
</div>
</div>
http://jsfiddle.net/kristofvhren/wtDE4/
Try this:
Remove inline-block property from images and use
img {
width: 125px;
display:block;
float:left;
}
instead..
Use 'float:left' property in 'img' tag and you can use margin in '.card2'

Why are my images not stuck together?

I have this simple HTML / CSS
<div class="image-group">
<img src="http://placehold.it/80x80" />
<img src="http://placehold.it/120x120" />
<img src="http://placehold.it/80x80" />
</div>
.image-group img {
margin: 0;
padding: 0;
}
JSFiddle
Why are the images not stuck together? I inspect the elements using Chrome's Inspector and it shows me nothing in between the images, yet they are spaced out.
I can get them to stick together by applying negative margins, but according to me, they should be sticking together anyways.
There's space in your html code. Try below
<div class="image-group">
<img src="http://placehold.it/80x80" /><img src="http://placehold.it/120x120" /><img src="http://placehold.it/80x80" />
</div>
Check out this blog post about dealing with spaces with consecutive inline-block elements such as images.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/

How to make the <img> tags line up horizontally in the div?

I need to make the images show up side by side horizontally in the div. How can I do that?
HTML:
<div class="Wrapper">
<img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" />
<img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" />
</div>
Reference: jsFiddle
You could also use css properties display:inline-block or float : left to achieve this.
HTML Code
<div>
<img ... />
<img ... />
<img ... />
</div>
CSS Code
div img{ display: inline-block;}
or
div img{ display: block;float: left;margin-right: 5px;}
On the general assumption of your code being something like this
<div>
<img ... />
<img ... />
<img ... />
</div>
Then, a simple CSS property will get the job done.
div img { display: inline; }
On seeing your HTML portion. You can use the following CSS to get them online.
.partners img { display: inline; }
Rather than using inline, which robs you of a lot of the control that comes with block elements, or changing their vertical align, I'd float them:
<html>
<head>
<style>
div.img_holder img
{
float: left;
}
</style>
</head>
<body>
<div class = "img_holder">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>
Floating is a peculiar science of its own in CSS; it's very much worth learning as it can yield some very powerful results. For example, were these divs, and not images, using inline would keep you from setting their height. Inline also affects how margins and padding work. vertical-align is inconsistent between browsers and, if I'm not mistaken, shouldn't actually yield the results you're looking for, at all.
now you can used to
Your default link is http://tinkerbin.com/ob9HFOA4
Css
img{
display: inline-block;
vertical-align: top;
}
live demo http://tinkerbin.com/a5BxIZrs
Firts of all, in order not to mess up your other images you're probably going to add, do this:
.Wrapper img{ float: left; }
This will float all your images within the .Wrapper class to the left. If all images in the page where these css rules are called will be aligned to the left, do this:
.Wrapper img{ float: left; }
EDIT: Add this rule to .Wrapper
.Wrapper{ width: 100%; }