I am going to arrange images
This is html code
<div class="imagearea">
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
</div>
css code
<style>
.imagearea{
width:100%;
position:absolute;
}
.subimg{
width:200px;
height:auto;
float:left;
}
</style>
I am going to arrange images
When the images change the line, sub images of next line is arranged to image (that the height is the smallest ) of top image.
you can check it in http://jsbin.com/ezoyag/1/edit
But if I have set the height style of subimg class statis size (ex height:200px) and then I can see the good result.
And I'd like to set the height style auto.
For it I have to use only html and css
From what i understand, you want the images to not have a fixed height, but you want every line to be aligned to the highest image.
To do that you need to add a wrapper div around each image group:
<div class="imagearea">
<div class="row">
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
<img class="subimg" src="http://www.tawbaware.com/maxlyons/sample_JPEG.jpg" />
</div>
<div class="row">
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
<img class="subimg" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Inside-out_torus_(animated,_small).gif" />
</div>
...
</div>
And add to the css:
.row{
float: left;
width: 100%;
}
See this fiddle
Update
when setting the height to auto, you are telling the image to scale the height according to width, so it will maintain aspect ratio, the browser controls it, and the image might appear shorter than you expect.
You can try using max-width:100% and remove the height instead, look here: http://jsfiddle.net/Kuy48/1/ , there is not other way that i can think of, to do what you want unless you set a fixed height
Related
I have this grid of images. I want no spacing in between. Also the width should be 100% of parent. Each column same size, in this case 20%. The flex takes care of that. However I want the height to main aspect ratio, but that is where the problem is. The height of the images stays constant as I zoom in and out (or resize window). It needs to be same aspect ratio as the current width of the image.
Does anyone know how to fix this?
HTML
<div class="image-grid-container">
<div class="image-grid">
<img src="images/me/img01.png" />
<img src="images/me/img02.png" />
<img src="images/me/img03.png" />
<img src="images/me/img04.png" />
<img src="images/me/img05.png" />
</div>
<div class="image-grid">
<img src="images/me/img06.png" />
<img src="images/me/img07.png" />
<img src="images/me/img08.png" />
<img src="images/me/img09.png" />
<img src="images/me/img10.png" />
</div>
<div class="image-grid">
<img src="images/me/img11.png" />
<img src="images/me/img12.png" />
<img src="images/me/img13.png" />
<img src="images/me/img14.png" />
<img src="images/me/img15.png" />
</div>
</div>
CSS
.image-grid-container .image-grid {
display:flex;
}
.image-grid-container .image-grid img {
width:100%;
}
You should set each image inside div.
Something like this:
<div class="img">
<img src="http://placehold.it/200x200" />
</div>
And then in CSS
.image-grid-container .image-grid .img img {
width: 100%;
}
Full example here: https://jsfiddle.net/cvru2yL5/
Can anyone advise and perhaps sample code to arrange the images below please ? It's for a html signature with linked images but i'm unsure whether tables or CSS would be best.
Image Far Left should align with the other 4 horizontally and the two top images need to be centered above the larger images below.
Any help appreciated.
enter image description here
using css is better than table.I think you want something like this. but you should scale your images by width and height properties:
<!DOCTYPE html>
<head>
<title>goodarzi</title>
</head>
<style>
.first{
float:left;
width:30%;
text-align:center;
}
</style>
<body>
<div class="wrapper">
<div class="first">
<a href="" ><img src="" title="" /></a>
</div>
<div class="first">
<div>
<img src="" title="" />
</div>
<div><img src="" title="" />
</div>
</div>
<div class="first">
<div>
<img src="" title="" />
</div>
<div><img src="" title="" />
</div>
</div>
</div>
</body>
</html>
If I have a group of pictures, how can I get the browser to wrap them as a single image? For example images a.jpg,b.jpg,c.jpg stay in a group d.jpg,e.jpg,f.jpg,g.jpg stay in a group, etc. So that if a.jpg is on one line then c.jpg is also on that line and not wrapped to the next line?
Try the white-space CSS property:
.nowrap {
white-space: nowrap;
}
<div class='nowrap'>
<img src='http://lorempizza.com/200/200' />
<img src='http://lorempizza.com/200/200' />
<img src='http://lorempizza.com/200/200' />
<img src='http://lorempizza.com/200/200' />
<img src='http://lorempizza.com/200/200' />
</div>
<div class='nowrap'>
<img src='http://lorempizza.com/250/200' />
<img src='http://lorempizza.com/250/200' />
<img src='http://lorempizza.com/250/200' />
<img src='http://lorempizza.com/250/200' />
<img src='http://lorempizza.com/250/200' />
</div>
I have a list of icons to be displayed. I am using the following layout to do this:
<div class="icons">
<div class="icon1">
img src="someimage" <p>Some test </p>
</div>
.
.
.
</div>
This is the CSS I am using:
.icons{
margin-top:5px;
margin-left:5px;
left:0;
}
.icon1{
line-height:15px;
margin-top:8px;
width:75px;
}
How do I modify this so that if I add more divs with the class icon1 they will be aligned in a new column when the max-height is reached?
I am unsure whether float:left will work. In my experience this causes the div tags to be added side by side and once they reach the end of the parent div the next one will be added to the bottom of the first column. He requires the opposite #Jack
what i suggest is using jquery to check if the height of your div tags are exceeding the parent div. If they are then add a new div and begin appending your image-div tags to the new div with style="float:left". Thus if your initial DOM contains
< div class="icons" > < /div >
appending one element should change the DOM to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
</div>
</div>
appending another element should change it to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
</div>
appending a third element which exceeds the parent div would change the DOM to this
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
<div class ="column" style="float:left">
<div class="icon3" > <img src="" height="" width="" /> </div>
</div>
</div>
You can do this with CSS 'multi-columns',
demo
but it is still a Candidate Recommendation, so the support is still very minimal even though you can use vendor prefixes to get it working(although not without some quirks) on the latest versions of Firefox, Chrome and Opera.
I have three images inside a div that scale according to window size. The div has a width of 60% and is floated left
<div id="display">
<img src="assets/images/angle1.jpg" style="width:35%;height:35%;" />
<img src="assets/images/angle2.jpg" style="width:35%;height:35;" />
<img src="assets/images/angle3.jpg" style="width:60%;height:100%;" />
</div>
Basically I want to maintain this scalability with the images arranged like this:
IMG SETUP http://brycekirk.ca/assets/images/setup.gif
Use nested DIVs to keep the right-side images together:
<div id="display">
<div id="column1" style="width:35%; float:left">
<img src="assets/images/angle1.jpg" /><br/><img src="assets/images/angle2.jpg" />
</div>
<div id="column2" style="width:60%; float:left">
<img src="assets/images/angle3.jpg" />
</div>
</div>