How to show several images in one div using css and html?
Ex: https://www.awesomescreenshot.com/image/3066306/6f04718aa19dcc4b88192304a0f9a307 .
Here what I have done so far:
<body>
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">
</div>
</body>
https://jsfiddle.net/wa9gfgvz/
Can you try this?
.deck{
display:block;
width:100%;
}
.deck img{
width:50%;
float:left;
}
Refer: JSFiddle
Separate the images in two different divs and put that divs inside a main div, then if you want, you can center the ContainerDiv or do whatever with that, and the content will be always two images per row. But I suggest to use bootstrap to this kind of feature, but, anyways, here it come:
<div class='ContainerDiv'>
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/zzfwhweu5reCv2Loqzon7Q5WAd5.jpg" alt="testimage">
</div>
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/sGuZHYvu0mXeQCwvJ5yzk2Yoytq.jpg" alt="testimage">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/4Ar01t6sW1ZZBcbz2R1wqjzIBdr.jpg" alt="testimage">
</div>
</div>
CSS:
.deck{
display:flex;
}
Fiddle: https://jsfiddle.net/prtanruz/
Related
I have the following html code:
<div><p>Recollida</p></div>
<div ng-repeat="image in images">
<a ng-href="{{image.path}}" class="imageAnchor">
<figure>
<img ng-src="{{image.path}}" alt="">
</figure>
</a>
</div>
Now I want to display the images in rows of 4, and I want every row to have the same height.
I've been struggling with this for a while and I want to know if there is any way to achieve this or if it's better to look for another solution. The <div> in the code above is originaly inside a larger <div> with a determined height.
Try this using flex
<div class="imagesContainer">
<div ng-repeat="image in images" class="imageContainer">
<a ng-href="{{image.path}}" class="imageAnchor">
<figure>
<img ng-src="{{image.path}}" alt="">
</figure>
</a>
</div>
</div>
.imagesContainer{
display:flex;
width:100%;
}
.imageContainer{
width:25%;
}
http://jsfiddle.net/Lsp2f5hk/
Read more about flex here : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
Float 2 elements side by side inside a container div
(2 answers)
Closed 3 years ago.
I have loop that goes trough all pictures that I have and displays them. I would like to display them in one row, from left to right, but with css that I have is displaying them one under other. I have use flow but not sure if I used it correctly.
Here is my code:
.column.is-narrow {
float: right;
}
.box {
float: right;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
I am aware that my css is not correct I have been searching for answer but couldn't find it.
Basically, when you float things, they'll still wrap if there isn't enough space to display both side by side. The easiest solution is to set a width on them to ensure that their container will always be wide enough to fit the content. You can do it with percentages or pixels, depending on your use case.
Note: If you use percentages, percentages adding up to 100% may still cause it to wrap, because they may not take into account padding, margin and/or border depending on other things. I usually do something like 49% for both, then float one right and one left.
You may use display and mind this inline-style <div class="box" style="width: 200px;"> wich is to start with, not wide enough to hold texts and img side by side
display:table/table-cell;
.column.is-narrow {
float: right;
}
.box {display:table;}
.box> p, .box> figure {display:table-cell;vertical-align:middle/* or top or else */
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
display:flex;
.column.is-narrow {
float: right;
}
.box {
display: flex;
/* removed width:200px from inline-style*/
}
p {
margin: auto;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
The easiest way is to declare the parent div as a flex container by setting the property display: flex and flex-direction:row. If you don't want to wrap your pictures, you can set flex-wrap:nowrap.
Here http://the-echoplex.net/flexyboxes/ is nice playground for flex box.
So I found the answer and it was pretty simple :)
I just had to add one more div with class with which I will float it to left. This is what I wanted:
.html
<div class="column">
<div class="columns">
<div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
</div>
</div>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
.css
.float{
float:left;
}
That was it. It's working. :)
I've put two divs (with one image in each) in one principal div. How can I make the CSS to autoresize both divs (with images) to fit size browser but keep the row formation?
The issue with my code is that, the images autoresize but divs will turn in column formation.
fiddle
HTML :
<div id="test">
<div style="display:inline-block">
<img src="a.jpg" width="100px" height="100px">
</div>
<div style="display:inline-block">
<img src="b.jpg" width="100px" height="100px">
</div>
</div>
CSS :
#test{ width:100%; height:100%;}
You may do this :
DEMO
HTML :
<div id="test">
<div>
<img src="http://lorempixel.com/output/fashion-q-c-640-480-1.jpg"/>
</div>
<div>
<img src="http://lorempixel.com/output/fashion-q-c-640-480-10.jpg"/>
</div>
</div>
CSS :
#test div{
width:50%;
float:left;
}
#test div img{
width:100%;
height:auto;
}
I am wondering which is the best way to put spaces in between these 3 images with CSS using Bootstrap 3 RC2 as what I have done at the moment is not auto-resizing the images, even though I have set the width to auto in my #picture id tag. I wish for them to b inline and resize the images accordingly.
Here is my markup:
<div class="container">
<div class="row">
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
</div>
</div>
CSS:
.container {
max-width:1000px;
background-color:white;
}
body {
background-color:cyan
}
#picture {
width:auto;
/*margin-left:10px; */
/*margin-right:10px; */
}
.col-lg-4 {
margin-left:10px;
margin-right:10px;
}
Check my Fiddle for a clearer view. Is there a better way to go about handling this?
Remove your own CSS for .col-lg-4: these margins may screw up the Bootstrap CSS. Next to that, these columns are only visible when your screen width is bigger than 1200 px.
Add the following classes to your divs: .col-xs-4 .col-sm-4 and .col-md-4, and give images a class="img-responsive" attribute.
It should work now as you wish.
As Harm Wellink mentioned, remove your css. You should only need the following html. Notice the "col-xs-4" and the "img-responsive" class. You do not need col-sm-4, col-md-4, col-lg-4 if you intend to have the 3 columns on all screen sizes.
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture1" class="img-responsive" />
</div>
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture2" class="img-responsive" />
</div>
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture3" class="img-responsive" />
</div>
</div>
If I understand your question right, you would like to show these pictures in a horizontal line, with a certain amount of space in between the pictures ?
First of all to get the DIV's in line change the following
.col-lg-4 {
display: inline-block;
}
try to specify a width for your container and row (e.g. 100%) and then your divs holding the pictures. Hope this helps you out?
I tried many "Display" param in CSS and seem none able to set a proper alignment, please help me to solve it.
<div id="fadeshow2toggler" style="text-align:center; width:290px;">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
Display will not set any allignment.
This may be what you need.
<style type="text/css">
.prev, .next, .status{float:left;}
</style>
try this:
<center>
<div id="fadeshow2toggler" style="text-align:center; width:290px;">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
</center>
Can you modify the HTML? If so, add a container for the two anchors and the div like this
<div id="fadeshow2toggler" style="width:290px;">
<div class="linkscontainer">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
</div>
And use this CSS
.linkscontainer{
margin:0px auto;
min-width:50%;
}
.status{
display:inline;
}