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>
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/
I want the elements to be side by side and not on top of one another.
When I say best way, I want the elements to not overlap when you change the size of the screen.
Here is my HTML:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="col-md-offset-1 col-sm-12 col-md-10" style="background-color: #f6f6ff;">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
<h1>2</h1>
<img src="media/github.png" alt="GitHub" height="150" width="150">
</div>
</div>
Here is a picture of what it looks like:
Right now you have an h1 separating the two images. Since heading tags are block level elements by default, it's not possible to line up the images side by side with the h1 separating them. However, if you put each image/heading in their own column, they will line up:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="row">
<div class="col-xs-6">
<h1>1</h1>
<img src="http://placehold.it/150x150" alt="Subversion" height="150" width="150">
</div>
<div class="col-xs-6">
<h1>2</h1>
<img src="http://placehold.it/150x150" alt="GitHub" height="150" width="150">
</div>
<div class="clearfix"></div>
</div>
</div>
Bootply
Using the Grid system to scale up to 12 columns, as described here
<div class="row">
<div class="col-md-4">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
</div>
<div class="col-md-4">
<h1>2</h1</div>
<div class="col-md-4">
<img src="media/github.png" alt="GitHub" height="150" width="150
</div>
You can change the size of the columns by increasing/decreasing col-md-4
If you want two elements to be side by side, you can use "row" and "col" from the bootstrap grid.
For example, this is how to code 2 images:
<div class="row">
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
</div
The bootstrap answer is the best. I had the same requirement before, only difference being that it was not acceptable to have the content in the different columns visually spread apart too much on large screens. In that case, you would use the original html and use css
.container-fluid div > * {
margin: 0 auto;
display: inline;
}
I need to align the play button image in the center of another image.
The example that I have is breaking when titles are long.
How can we align blue color image exactly over the large image
Fiddle
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
</div>
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>" />
</div>
<div class="video-details-wrapper"> <span>this is video short video title</span>
Just put your play-item-wrapper inside the container video-image-wrapper and add a relative positioning on it.
<div class="video-item-wrapper">
<div class="video-image-wrapper">
<img src="http://placehold.it/600x400" class="img-responsive" />
<div class="play-item-wrapper">
<img src="http://placehold.it/50.png/09f/fff&text=>" />
</div>
</div>
<div class="video-details-wrapper">
<span>this is video short video title</span>
</div>
</div>
And in CSS
.video-image-wrapper { position: relative; }
JSFiddle: https://jsfiddle.net/L51bd8vr/
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
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.